如何在氣泡圖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軸？

回答

相關問題