Question

<!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>

Answer 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/

更改页面D3 / JS上的形状位置

1 个答案: