目前我的图表如下所示。
http://jsfiddle.net/darcyvoutt/qNnLx/2/
以下是代码:
nv.addGraph(function () {
var yourProductColor = "rgba(242,94,34,0.58)";
var competitorColor = "rgba(57,198,226,58)";
var marketColor = "rgba(255,255,255,0.75)";
var chart = nv.models.scatterChart()
.color([marketColor, competitorColor, yourProductColor])
.transitionDuration(350)
.margin({
bottom: 60
})
.showDistX(true)
.showDistY(true);
//Configure how the tooltip looks.
chart.tooltipContent(function (key) {
return '<h3>' + key + '</h3>';
});
chart.yAxis.tickFormat(d3.format('.02f'))
.axisLabel("Frequency");
chart.xAxis.axisLabel("Tranditional Media -> Digital & Social Media")
.tickFormat(d3.format('.02f'));
//We want to show shapes other than circles.
chart.scatter.onlyCircles(true);
d3.select('#marketingChart svg')
.datum(exampleData())
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
function exampleData() {
return [{
"key": "Market",
"values": [{
"x": 0.2,
"y": 25,
"size": 230
}, {
"x": 0.4,
"y": 39,
"size": 350
}, {
"x": 0.7,
"y": 5,
"size": 200
}, {
"x": 0.9,
"y": 23,
"size": 200
}]
}, {
"key": "Competitor",
"values": [{
"x": 0.2,
"y": 20,
"size": 150
}, {
"x": 0.45,
"y": 45,
"size": 200
}, {
"x": 0.7,
"y": 70,
"size": 180
}, {
"x": 0.3,
"y": 30,
"size": 340
}]
}, {
"key": "Your Product",
"values": [{
"x": 0.5,
"y": 30,
"size": 50,
"label": "YourProduct"
}]
}]
}
});
但我希望它在泡泡大小方面看起来更像这样。
有谁知道如何增加整体尺寸(不会失去比例)。
由于
答案 0 :(得分:4)
我相信this previous SO answer解决了您的问题。您可以使用.sizeRange([minArea, maxArea])
控制散点图中圆的半径。例如,在您的代码中:
var chart = nv.models.scatterChart()
.color([marketColor, competitorColor, yourProductColor])
.transitionDuration(350)
.margin({bottom: 60})
.showDistX(true)
.showDistY(true)
.sizeRange([1000, 5000]); # added sizeRange
注意:从版本1.7.1开始,.sizeRange
已更改为.pointRange
这导致以下散点图: