D3.js Balkendiagramm - Ausrichten von Etiketten mit benutzerdefinierter Balkenbreite

Question

Ich versuche ein Balkendiagramm zu erstellen, das dynamische Daten anzeigt, was bedeutet, dass beim Laden zwischen 1 und 10 Balken liegen können. Standardmäßig sind die Beschriftungen korrekt an der Mitte jedes Balkens ausgerichtet. Für mein Balkendiagramm muss ich jedoch die Breite jedes Balkens kürzer machen.

Ich habe versucht, die folgende Codezeile zu ändern:

height = 200 - margin.top - margin.bottom; 

Dies gelingt in der Breite der Balken reduziert wird, sondern tut dies, indem die Gesamtgröße des Graphen zu reduzieren.

Außerdem habe ich versucht, in den folgenden Code die Höhe Attribut zu ändern:

svg.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("width", function(d) {return x(d.value); }) 
    .attr("y", function(d) { return y(d.label); }) 
    .attr("height", y.bandwidth()) 

Dies ändert die Größe erfolgreich die Bar, aber bewegt sich die Etiketten aus allignment.

Kann mir jemand helfen, wenn die Etiketten bei einer benutzerdefinierten Breite automatisch auf die Mitte der Leiste ausgerichtet werden? Ich habe einen Link zu einem JSFiddle angehängt, um mein Problem zu visualisieren.

JSFiddle

Answer 1

Die padding rechts ist, verwenden Sie es:

var y = d3.scaleBand() 
    .range([height, 0]) 
    .padding(0.4);//tweak this value here 

Hier ist die aktualisierte Geige, mit einem Polster von 0,4: https://jsfiddle.net/xLfdft2f/