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/