d3 Balkendiagramm mit RangeRoundBands - warum gibt es äußere Polsterung?

Ich erstelle ein Balkendiagramm mit einer Ordinalskala für die X-Achse und mit RangeRoundBands. Ich folge diesem Beispiel: https://bl.ocks.org/mbostock/3885304 d3 Balkendiagramm mit RangeRoundBands - warum gibt es äußere Polsterung?

Allerdings hat mein Diagramm äußere Polsterung - große Leerzeichen am Anfang und Ende der Achse, wo ich möchte, dass die Balken vollständig ausdehnen. Der Screenshot unten zeigt die Räume, die ich rot umkreist habe.

Wie kann ich entfernen diese Räume? Ich brauche meine Ränder und die Svg Breite und Höhe, um gleich zu bleiben.

ist hier ein Plunker mit dem Diagramm, wie es jetzt ist: https://plnkr.co/edit/gMw7jvieKSlFbHLTNY9o?p=preview

-Code ist auch unter:

<!doctype html> 
    <html> 
    <head> 
     <style> 
     .axis path{ 
      fill: none; 
      stroke: #cccccc; 
      stroke-width: 2px; 
     } 
     .x.axis text{ 
      display:none; 
     } 
     .bar{ 
      fill: blue; 
     } 
     body{ 
      font-family:Helvetica, Arial, sans-serif; 
     } 
     </style> 
    </head> 
    <body> 
    <div id="barchart"></div> 

    <script src="https://d3js.org/d3.v3.min.js"></script> 

    <script> 

    var margin = {top: 20, right: 0, bottom: 50, left: 300}, 
     width = 800 - margin.left - margin.right; 
      height = 465 - margin.top - margin.bottom; 

    var x = d3.scale.ordinal() 
       .rangeRoundBands([0, width], .5); 
    var y = d3.scale.linear().range([height, 0]); 

    var yAxis = d3.svg.axis().scale(y) 
     .orient("left").ticks(5); 

    var xAxis = d3.svg.axis().scale(x) 
      .orient("bottom"); 

    var barsvg = d3.select("#barchart") 
     .append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
      .attr("class", "barchartbox") 
      .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

    // Get the data 
     d3.json("population.json", function(error, data1) { 

     x.domain(data1.map(function(d) { return d.country; })); 
     y.domain([0, d3.max(data1, function(d) { return d.value; })]); 

     barsvg.selectAll(".axis").remove(); 

     // Add the Y Axis 
     barsvg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis); 

     // Add the X Axis 
     barsvg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     var bars = barsvg.selectAll(".bar") 
      .data(data1); 

     bars.enter().append("rect") 
      .attr("class", "bar") 
      .attr("x", function(d) { return x(d.country); }) 
      .attr("width", x.rangeBand()) 
      .attr("y", function(d) {return y(d.value); }) 
      .attr("height", function(d) { return height - y(d.value); }); 

     bars.exit().remove(); 

    }); 


    </script> 
    </body> 
    </html>

Quelle

2016-05-17 sprucegoose

Sie tun.

var x = d3.scale.ordinal() 
       .rangeRoundBands([0, width], .5);

Verwenden Sie stattdessen RangeBands.

var x = d3.scale.ordinal() 
      .rangeBands([0, width], .5);

Arbeits Code here

Quelle

2016-05-17 05:45:30 Cyril

Es ist im d3 Dokument angegeben ist, dass, während rangeRoundBands Verwendung Rundungs zusätzliche äußere führt Padding, das im Durchschnitt proportional zur Länge der Domäne ist.

Zum Beispiel kann für eine Domäne der Größe 50 ein zusätzliches 25-px-Außenpolster auf jeder Seite erforderlich sein. Durch Ändern des Bereichsumfangs, der näher an einem Vielfachen der Domänenlänge liegt, kann die zusätzliche Auffüllung verringert werden.

Referenz: rangeRoundBands

So ist die Lösung wäre folgende Zeilen zu verwenden, nachdem die x-Achse Domain Einstellung:

var mult = Math.max (1, Math.floor (width/x.domain().length)); 
x.rangeRoundBands ([0, (x.domain().length * mult)], 0.1, 0);

Quelle

2016-05-17 05:38:50 Gilsha

d3 Balkendiagramm mit RangeRoundBands - warum gibt es äußere Polsterung?

Antwort

Verwandte Themen