d3 Создать перекрывающиеся круги

Question

Я хотел бы создать диаграмму, как на рисунке ниже. Все (круги) являются статическими, за исключением точки, представляющей Q1, Q2 и т. Д. Это мой первый раз, когда я использовал D3 и просмотрел учебники Скотта Мюррея (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')