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 回答