因为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 }]
}]