2 
<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
</head>
<body>

divをjsにリンク

<div id="svgpathSVGdata"></div>

D3.jsの開始

<script type="text/javascript">


    var divElem = d3.select("#svgpathSVGdata");

キャンバスの設定

    var svgcanvas = divElem.append("svg:svg")
        .attr("width", 800)
        .attr("height", 800);

現時点では逆さまになっているので、もっと中央に移動したいと思います

    svgcanvas.append("svg:path")
        .attr("d","M -200,0 A200,200 0 0,0 500,0 L -200,0") 
        .style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "none");
</script>

</body>
</html>
4

1 に答える 1

1

属性を適用しtransformてパスを移動し、正しい側に反転させることができます。

var divElem = d3.select("#svgpathSVGdata");
var svgcanvas = divElem.append("svg:svg")
        .attr("width", 800)
        .attr("height", 800);
svgcanvas.append("svg:path")
        .attr("d","M -200,0 A200,200 0 0,0 500,0 L -200,0") 
        .attr("transform", "translate(220,400) scale(1, -1)")
        .style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "none");​

http://jsfiddle.net/QALqg/

于 2012-09-27T19:52:26.413 に答える