在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()只是为了确保我们得到最接近的整像素值。