Question

如何使用D3沿着svg的y轴（垂直轴）绘制半圆弧？这是我想要实现的目标的图像target

到目前为止，这是我的代码： -

var canvas = d3.select("body").append("svg")
           .attr("width",width)
               .attr("height",height);

var group = canvas.append("g")
        .attr("transform","translate(0,200)");

var origin = d3.svg.arc()
           .outerRadius(50)
           .innerRadius(0)
           .startAngle(-1.5755)
           .endAngle(1.5755);

var arcs1 = group.append('g')
         .attr('class','arc')
         .attr("transform","translate(50,0)");

var yAxis = group.append("line")
             .attr("transform","translate(50,0)")
             .attr("x1", 0)
                     .attr("y1", -200)
                     .attr("x2", 0)
                     .attr("y2", height)
                     .attr("stroke-width", 2)
                     .attr("stroke", "black");

Answer 1

首先，要像你的目标一样绘制弧线，你希望 startAngle 从 0 开始， endAngle 从 3.14 < / strong>或 Math.PI 。

var origin = d3.svg.arc() .outerRadius(50) .innerRadius(0) .startAngle(0) .endAngle(Math.PI);

然后只需将一条路径附加到arcs1并使用您的原点函数绘制它。

arcs1.append("path").attr("d", origin);

您可以在http://jsfiddle.net/7EfS5/查看现场演示。

修改要更改弧的颜色，可以使用 .attr（＆＃34;填充＆＃34;，颜色）或 .style（＆＃34;填充＆＃34;，颜色））

arcs1.append("path").attr("d", origin) .attr("fill", "red");

希望得到这个帮助。

Answer 2

制作d3弧时，角度0表示圆的顶部。因此，为了制作像图像中所示的弧形，您将希望您的起始角度为0，并且您的结束角度为圆的一半，即Pi弧度：

var arc = d3.svg.arc()
  .outerRadius(50)
  .innerRadius(0)
  .startAngle(0)
  .endAngle(Math.PI);

就定位弧而言，您可以使用svg变换将弧的原点转换为您想要的位置。例如，如果您的y轴具有高度h，则可以在为弧创建路径元素时将原点转换为轴的中心，如下所示：

svg.append('path')
  .attr('transform', 'translate(0,' + h/2 + ')')
  .attr('d', arc);

HERE是一个演示。

使用D3.js的垂直弧

2 个答案: