Question

我在带有dc.js的气泡图中遇到x和y轴问题。

公司有两个属性：Ytd（随机）和Ytdn1（随机）。选择正确的x轴和Y轴的逻辑是什么？

x轴对我来说：Ytd - Ytdn1，Y轴是变化。有什么好主意吗？

如何为x和y选择合适的比例？该怎么做才能提高可读性？有任何想法吗？

    yearlyBubbleChart
        .width(1200)
        .height(400)
        .transitionDuration(1500)
        .margins({ top: 10, right: 50, bottom: 30, left: 40 })
        .dimension(yearlyDimension)       
        .group(yearlyPerformanceGroup)
        .colors(["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"])
        .colorDomain([-500, 500])

        .colorAccessor(function (d) {
            //  console.log("Color");  
            // console.log(d);
            return +d.value.variation;
        })
        .keyAccessor(function (p) {
            return p.value.absGain/500;
        })
        .valueAccessor(function (p) {
            return p.value.variation/2;
        }).radiusValueAccessor(function (p) {
            return p.value.fluctuationPercentage;
        })
        .maxBubbleRelativeSize(0.7)
        .x(d3.scale.linear())
        .y(d3.scale.linear())
        .r(d3.scale.linear().domain([0, 4000]))
                //##### Elastic Scaling


        .elasticY(true)
        .elasticX(true)

        .yAxisPadding(100)
        .xAxisPadding(100)

        .renderHorizontalGridLines(true)

        .renderVerticalGridLines(true)

        .xAxisLabel('X')

        .yAxisLabel('Y')

        .renderLabel(true)
        .label(function (p) {
            return p.key; 
        })

        .renderTitle(true)
        .title(function (p) { 
            return [
                p.key,
                'Abs Gain: ' + p.value.absGain,
                'Variation: ' + p.value.variation + '%'

            ].join('\n');
        })

        .yAxis().tickFormat(function (v) {

            // console.log("Hethi el V mta3 e tick")
            //  console.log(v);
            return v + '%';
        });
dc.renderAll();

这是一个jsfiddle：http://jsfiddle.net/w8top6zj/

Answer 1

我对代码做了一些更改，但我得到了更好的结果。

yearlyBubbleChart
        .width(1200)
        .height(400)
        .transitionDuration(1500)
        .margins({ top: 10, right: 50, bottom: 30, left: 40 })
        .dimension(yearlyDimension)       
        .group(yearlyPerformanceGroup)
        .colors(["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"])
        .colorDomain([-500, 500])

        .colorAccessor(function (d) {
            //  console.log("Color");  
            // console.log(d);
            return +d.value.variation;
        })
        .keyAccessor(function (p) {
            return p.value.absGain;
        })
        .valueAccessor(function (p) {
            return p.value.variation;
        }).radiusValueAccessor(function (p) {
            return p.value.fluctuationPercentage;
        })
        .maxBubbleRelativeSize(0.7)
        .x(d3.scale.linear())
        .y(d3.scale.linear())
        .r(d3.scale.linear().domain([0, 4000]))
                //##### Elastic Scaling


        .elasticY(true)
        .elasticX(true)

        .yAxisPadding(100)
        .xAxisPadding(100)

        .renderHorizontalGridLines(true)

        .renderVerticalGridLines(true)

        .xAxisLabel('X')

        .yAxisLabel('Y')

        .renderLabel(true)
        .label(function (p) {
            return p.key; 
        })

        .renderTitle(true)
        .title(function (p) { 
            return [
                p.key,
                'Abs Gain: ' + p.value.absGain,
                'Variation: ' + p.value.variation + '%'

            ].join('\n');
        })

        .yAxis().tickFormat(function (v) {

            // console.log("Hethi el V mta3 e tick")
            //  console.log(v);
            return v + '%';
        });
dc.renderAll();

以下是：http://jsfiddle.net/n34gn7qg/

现在我只有Min和Max的问题，两个肢体都没有完全显示出来。为什么会这样？

我告诉气泡图使用elasticX和elasticY计算每次值域（Ytd - Ytdn1）。

Answer 2

使用elasticX（true）和elasticY（true）来获得完美的比例。问题是边框，它用最大值和最小值隐藏圆圈。要解决此问题，您可以将剪辑路径隐藏为here。

git branch

你会得到类似的东西：

如何在气泡图dc.js中选择x和y轴？

2 个答案: