Question

我想生成如下图所示的图表。除了代表Q1，Q2等的点之外，一切（圆圈）都是静态的。这是我第一次使用D3并浏览了Scott Murray的教程（http://alignedleft.com/tutorials/）。

question plotting http://dahlia.net78.net/evaluation.png

到目前为止，我只是想出了紫色圆圈。

var dataset = [ 280, 230, 180, 130, 80, 30 ];

var w = 600;
var h = 600;

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

svg.selectAll("circle")
   .data(dataset)
   .enter()
   .append("circle")
   .attr("cx", 300)
   .attr("cy", 300)
   .attr("r", function(d) { return d; })
   .attr("fill","mediumpurple")
   .attr("stroke","black")
   .attr("stroke-width",1);

我不确定如何继续并生成重叠的圆圈。任何人都可以指出我正确的方向？感谢。

Answer 1

您可以为每组圆圈使用群组。请注意，svg没有图层，圆圈按顺序绘制。

var gPurple = svg.append('g');

gPurple.selectAll('circle')
    // your code here, you can also add the text

var gLeft = svg.append('g')
    // draw left circles here 

// add the white circle, above all the others
gPurple.append('circle')

d3生成重叠的圆圈

1 个答案: