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

目前，它是颠倒的，我希望它也更集中地移动

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

svgcanvas.append（“svg:path”）
.attr（“d”，“M-200,0 A200200,0 500,0 L-200,0”）
.样式（“笔划宽度”，2）
.风格（“笔划”、“钢蓝”）
.样式（“填充”、“无”）；

您可以应用

变换

属性来移动路径并将其翻转到正确的一侧：

    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> 

---

非常感谢！您认为使用d3.svg.line（）更有益吗？实际上，在您的情况下，您需要arc生成器

d3.svg.arc（）

它取决于您想用它构建什么。如果需要设置圆弧动画，请使用圆弧生成器。否则你会对路径满意的。基本上，我想把数据库中的数据以点等形式传递到形状上。。。我尝试使用d3.svg.arc（）创建一个简单的形状，但无法让它创建一个简单的形状。有什么帮助吗？如果您正在绘制数据，请使用d3.svg.line（）是您所需要的，下面是一个圆弧生成器示例：再次感谢！你会说为了把我的形状弄碎，我会用隔板吗？

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

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");​