投稿記事

Mathjax, D3 SVG

26 Sep 2014

Mathjax の数式を d3.js の SVG へ出力しています。

いろいろ調べましたが

forreignObjectタグを使う方法が簡単なようなので書いてみました。

$$固定円の半径:r_{c}=200$$ $$移動円の半径;r_{m} \quad (r_{c}>r_{m}>0)$$
移動円の半径 角度倍数(360° x)


CSS

.MathJax_SVG_Display {
  text-align: left !important;
}
.MathJax_SVG g{
  stroke:#fff;
  stroke-width:2;
  fill:#fff;
}
html
<!-- Mathjax SVG出力指定 -->
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG"></script>
JavaScript
//出力データ設定
var foData = [
        {"x":150,"y":0,
            "text":"$$内サイクロイド$$"},
        {"x":0,"y":500,
            "text":"$$x=(r_{c}-r_{m})\\centerdot cos\\theta + r_{m} \\centerdot cos(\\frac{r_{c}-r_{m}}{r_{m}}\\theta)$$"},
        {"x":0,"y":550,
            "text":"$$y=(r_{c}-r_{m})\\centerdot sin\\theta - r_{m} \\centerdot sin(\\frac{r_{c}-r_{m}}{r_{m}}\\theta)$$"}
    ];               

// foreignObject追加  
svg01.selectAll(".fo")
    .data(foData)
    .enter()
    .append("foreignObject")
    .attr("class","fo")
    .attr("x",function(d){ return d.x })
    .attr("y",function(d){ return d.y })
    .text(function(d){return d.text;});