Question

我是d3的新手，我正在尝试做this之类的事情。这是我到目前为止所做的JSFiddle，但我不知道如何对齐线条以将它们放在图片中，以及如何在图表下面放置一个信息框。

var x=d3.scale.linear().domain([0,r]).range([0,w])
var y=d3.scale.linear().domain([r,0]).range([h,0])

center_group.append('line').attr("x1",x(r/4)).attr("y1",0);
center_group.append('line').attr("x1",x(-r/4)).attr("y1",0);
center_group.append('line').attr("x1",0).attr("y1",x(25));
center_group.append('line').attr("x1",0).attr("y1",x(-r/4));

谢谢！

Answer 1

如果我理解正确，您可以尝试对齐圆圈内的光罩线。我已经创建了一个fiddle，它可以展示你原始小提琴中两个问题的解决方案。

    //circle svg drawn above this point...
    center_group.append('line').attr("x1",x(r/6)).attr("y1",0).attr("x2",x(r/5.1));
    center_group.append('line').attr("x1",x(-r/6)).attr("y1",0).attr("x2",x(-r/5.1));
    center_group.append('line').attr("x1",0).attr("y1",x(19.7)).attr("y2",x(r/6));
    center_group.append('line').attr("x1",0).attr("y1",x(-r/6)).attr("y2",x(-r/5.1));
    //then include table, as shown here: http://bl.ocks.org/gka/17ee676dc59aa752b4e6

第一个问题是在（白色填充的）圆圈之前绘制线条（因此圆圈内的任何线条都被覆盖）。第二个问题是线条是无界的，所以我在需要的地方添加了x2和y2属性。有关结果，请参阅picture link。

关于信息框，你可以简单地在图表下面添加一个文本元素并将数据放在那里，但是对于更健壮的东西，你可以包含一个表，如上面代码中链接的示例所示（只有两个）显然允许链接。

用d3js画出这个环形图

1 个答案: