2

現在、私のチャートは次のようになっています。

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

でも、泡の大きさはもっとこんな感じにしたい。

ここに画像の説明を入力

全体のサイズを大きくする方法を知っている人はいますか (プロポーションを失うことなく)。

ありがとう

4

1 に答える 1