d3 生成重叠的圆圈答案

【问题标题】：d3 Generate overlapping circlesd3 生成重叠的圆圈
【发布时间】：2013-05-27 08:11:14
【问题描述】：

我想生成如下图所示的图表。除了代表 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);

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

【问题讨论】：

标签： d3.js geometry

【解决方案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')

【讨论】：

谢谢。这就是我想出的。 jsfiddle。绘制数据:)
优秀。我认为本教程alignedleft.com/tutorials/d3 可以在接下来的步骤中为您提供帮助（过渡？）。问候，
switch 语句能做到吗？我打算根据用户 ID 从数据库中获取所需的数据。章节和级别将决定问题属于哪个圈子。
也许您可以为所有问题圈添加一个组，并根据章节和级别计算它们的位置和半径。
澄清一下，gLeft 已经有一个问题圈组，对吗？我可以从那里添加东西吗？是的，我会尝试按照您的建议提出位置和半径。