1

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

问题绘图 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);

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

4

1 回答 1

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')
于 2013-05-27T11:28:36.327 回答