Wie wählt man X- und Y-Achse in einem Bubble Chart dc.js?

Question

Ich habe ein Problem mit der x- und y-Achse in einem Blasendiagramm mit dc.js.

Ein Unternehmen hat zwei Eigenschaften: ein Ytd (zufällig) und ein Ytdn1 (zufällig). Was ist die Logik, um die richtige x- und y-Achse zu wählen?

x Achse ist für mich: Ytd - Ytdn1 und die Y-Achse ist die Variation. Gibt es eine bessere Idee?

Wie wählt man die richtigen Skalen für x und y? Was ist besser lesbar? Irgendwelche Ideen ? Hier

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(); 

ist ein jsfiddle: http://jsfiddle.net/w8top6zj/

Answer 1

ich gemacht habe einige Änderungen des Kodex, und ich habe ein besseres Ergebnis bekommen. Hier

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(); 

ist: http://jsfiddle.net/n34gn7qg/

Jetzt habe ich nur Probleme mit der Min- und Max, beide Extremitäten sind nicht vollständig gezeigt. Warum ist das Verhalten?

Ich sagte dem Bubble Chart, elasticX und elasticY zu verwenden, um jedes Mal die Domäne der Werte zu berechnen (Ytd - Ytdn1).

Answer 2

Verwenden elasticX (true) und elasticY (true) die perfekte Skala zu erhalten. Das Problem sind Grenzen, die einen Kreis mit Max- und Min-Werten verbergen. Um dieses Problem zu lösen, können Sie den Clip-Pfad wie erwogen here ausblenden.

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

Sie werden so etwas bekommen: