javascript - NVD3 - 有没有办法增加气泡的大小？

Question

目前我的图表如下所示。

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"
            }]
        }]
    }
});

但我希望它在气泡大小方面看起来更像这样。

有谁知道如何增加整体尺寸（不失比例）。

谢谢

Answer 1

我相信这个先前的 SO 答案可以解决您的问题。您可以使用 控制散点图中圆的半径.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

这将产生以下散点图：