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

我在使用dc.js的气泡图中遇到了x和y轴的问题。如何在气泡图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/

来源

2016-06-07 S.BM

我已经做了一些更改代码，我就能得到更好的结果。

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/

现在我只有用最小和最大的问题，四肢都没有完全显示。为什么是这种行为？

我告诉Bubble Chart使用elasticX和elasticY来计算每个值的域（Ytd-Ytdn1）。

来源

2016-06-08 08:30:14

您是否尝试过增加你.xAxisPadding（100）值？尝试像2000年，这可能会工作... –

不幸的是...仍然是相同的问题 –

嗯...尝试.elasticRadius（真） –

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

bubbleChart 
    ....    
    .x(d3.scale.linear()) 
    .y(d3.scale.linear()) 
    .elasticX(true) 
    .elasticY(true) 
    .... 
    .on('renderlet', function(chart, filter){ 
     chart.svg().select(".chart-body").attr("clip-path",null); 
    });

你会得到这样的事情：

来源

2016-07-29 11:13:14

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

回答

相关问题