d3.js - 如何在直线路径中创建 D3 气泡图？

Question

我想创建一个气泡图，就像图片中的那样。直线路径中的气泡图。具有每种数据类型的大小范围的气泡。

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/