在NVD3 scatterChart中创建脉冲圆

时间:2015-01-21 04:07:51

标签: javascript d3.js charts nvd3.js

因为NVD3文档非常少,所以我不确定如何修改代码以在散点图中创建脉冲气泡。我希望能够为每个气泡迭代一组数据,并在连续循环中根据该数据设置气泡的大小。目前,我的代码在调用图表后立即粘贴所有数据点。

我发现了使用D3做类似事情的各种例子,但没有完全相同。而且我还不确定如何将它应用于NVD3,因为它似乎没有使用与D3相同的进入/退出方式。我在下面提供了我当前代码和数据的示例。我还创建了一个JSFiddle,因此你可以看到它(不是)工作:http://jsfiddle.net/9oyaypz0/。任何帮助将非常感谢。

function makeScatter(data, div, showLabels,title) {
nv.addGraph(function() {
    var width = 450,
        height = 275;
    var chart = nv.models.scatterChart()
        .showDistX(true)
        .showDistY(true)
        .transitionDuration(350)
        .sizeRange([0, 10000])
        .margin({bottom:75})
        .color(d3.scale.category10().range());

    chart.tooltipContent(function(key, x, y, obj) {
      return '<h4>' + key + '</h4><h5 style="clear:both;line-height:0.1rem;text-align:center;">' + obj.point.size + '</h5>';
    });

    chart.xAxis.tickFormat(function (d) { return ''; });
    chart.yAxis.tickFormat(function (d) { return ''; });
    chart.forceX([0]);
    chart.forceX([5]);
    chart.forceY([0]);
    chart.forceY([6]);
    chart.scatter.onlyCircles(false);

    if(title) {
        d3.select('title')
            .append("text")
            .attr("x", (width / 2))
            .attr("y", 100)
            .style("font-size", "16px")
            .attr("text-anchor", "middle")
            .text(title);
        $(div).append("<h2>"+title+"</h2>");
    }

    d3.select(div)
        .datum(data)
        .transition().duration(1200)
        .attr('width', width)
        .attr('height', height)
        .call(chart);

    nv.utils.windowResize(chart.update);
    return chart;
});
}; 

数据如下:

var data = [{ key: "Test Bubble 1",
             values: [{ series: 0,
                        shape: "circle",
                        size: 1592,
                        x: 5,
                        y: 4 },
                      { series: 1,
                        shape: "circle",
                        size: 1560,
                        x: 5,
                        y: 4 },
                      { series: 2,
                        shape: "circle",
                        size: 1512,
                        x: 5,
                        y: 4 },
                      { series: 3,
                        shape: "circle",
                        size: 1487,
                        x: 5,
                        y: 4 }]
            },
            { key: "Test Bubble 2",
             values: [{ series: 0,
                        shape: "circle",
                        size: 592,
                        x: 5,
                        y: 4 },
                      { series: 1,
                        shape: "circle",
                        size: 560,
                        x: 5,
                        y: 4 },
                      { series: 2,
                        shape: "circle",
                        size: 512,
                        x: 5,
                        y: 4 },
                      { series: 3,
                        shape: "circle",
                        size: 487,
                        x: 5,
                        y: 4 }]
            }]

0 个答案:

没有答案