在 D3 Crossfilter 示例中更改条形宽度

Question

我正在查看 crossfliter 示例，并使用一些样本数据重新创建条形图，但是对于我的数据，我希望条形宽度更窄，我相信它在 barPath 函数中，但没有还没想好怎么做。感谢您的帮助！

Answer 1

在页面源代码的第 463 行，您有：

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

h9V 控制每个栏的宽度。更改为 h5V 以提供更小的条形。请记住，如果您仍然希望每个栏都位于相关容器的中央，则必须进行以下更改：

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

如果你想要一个可变的条形宽度，你可以这样做：

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

注意 Math.round() 只是为了确保我们得到最接近的整个像素值。

Change bar width in D3 Crossfilter example