如何在Straigth線路徑中創建D3氣泡圖？

Question

我想創建一個氣泡圖，就像圖中的氣泡圖一樣。在straigth線路徑中的氣泡圖。氣泡具有每種數據類型的大小範圍。

Answer 1

通過數據使用的SVG元素，循環，以及用於每個數據繪製圓圈和附加文本字段。 這是建立從基地：

var data = [{ 
    label: 'Datum 1', 
    rVal: 1, 
    yVal: 1, 
    xVal: 1, 
     'class': 'red' 
}, { 
    label: 'Datum 2', 
    rVal: 2, 
    yVal: 1, 
    xVal: 2, 
     'class': 'green' 
}, { 
    label: 'Datum 3', 
    rVal: 3, 
    yVal: 1, 
    xVal: 3, 
     'class': 'blue' 
}], 

    // Preliminaries 
    // domain is the data domain to show 
    // range is the range the values are mapped to 
    svgElm = d3.select('svg'), 
    rscale = d3.scale.linear().domain([0, 5]) 
     .range([0, 60]), 
    xscale = d3.scale.linear().domain([0, 5]) 
     .range([0, 320]), 
    yscale = d3.scale.linear().domain([0, 5]) 
     .range([240, 0]), 
    circles; 

// Circles now easily reusable 
circles = svgElm.select('g.data-group') 
    .selectAll('circle') 
    .data(data) 
    .enter() 
    .append('circle'); 

// Alter circles 
circles.attr('class', function (d) { 
    return d['class']; 
}) 
    .attr('r', function (d) { 
    return rscale(d.rVal); 
}) 
    .attr('cx', function (d) { 
    return xscale(d.xVal); 
}) 
    .attr('cy', function (d) { 
    return yscale(d.yVal); 
}); 

查看的jsfiddle完整的例子： http://jsfiddle.net/elydelacruz/XW8sE/13/