Ändern der Balkenbreite in D3 Crossfilter Beispiel

Question

Beispiel, und verwenden Sie einige Beispieldaten, um Balkendiagramme neu zu erstellen, aber mit meinen Daten möchte ich eine schmalere Balkenbreite haben, glaube ich, es ist in barPath-Funktion, aber Ich habe noch nicht herausgefunden, wie es geht. Danke für jede Hilfe!

Answer 1

On line 463 der Seite Quelle, Sie haben:

path.push('M', x(d.key), ',', height, 'V', y(d.value), 'h9V', height); 

Die h9V steuert die Breite der einzelnen Balken. Ändern Sie zu h5V, um ein bisschen eine kleinere Stange zu geben. Denken Sie daran, dass, wenn Sie immer noch jeden Takt von zentraler Bedeutung für den betreffenden bin möchten, müssen Sie die folgenden Änderungen vornehmen:

path.push('M', x(d.key) + 2, ',', height, 'V', y(d.value), 'h5V', height); 

Wenn Sie eine variable Strichbreite haben wollen, können Sie etwas tun könnte:

var barWidth = 0.6; 

... 

path.push('M', x(d.key) + Math.round((10-barWidth*10)/2), ',', height, 'V', y(d.value), 'h', barWidth*10,'V', height); 

Beachten Sie die Math.round() ist nur um sicherzustellen, dass wir den nächsten ganzen Pixelwert erhalten.