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

时间:2014-07-08 22:33:00

标签: javascript d3.js nvd3.js bubble-chart

目前我的图表如下所示。

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

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

enter image description here

有谁知道如何增加整体尺寸(不会失去比例)。

由于

1 个答案:

答案 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

这导致以下散点图: enter image description here