代码之家 › 专栏 › 技术社区 › dvoutt

NVD3-有没有办法增加气泡的大小?[副本]

bubble-chart nvd3.js d3.js javascript

2

dvoutt · 技术社区 · 11 年前

目前我的图表如下。

代码如下:

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 回复 | 直到 11 年前

1

5

Community Mohan Dere 8 年前

我相信 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