如何在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/