填充对条形图没有影响

Question

我正在制作条形图，但我希望条形之间不要太靠近。

这是我定义 x 比例的方式：

    let echelleX = d3.scaleBand()
        .domain(setMots)
        .range([0, setMots.length * largeurBarre])
        .padding(.1);

这是我得到的图表：

如果我现在用更高的填充定义我的比例：

    let echelleX = d3.scaleBand()
        .domain(setMots)
        .range([0, setMots.length * largeurBarre])
        .padding(.5);

这是我得到的图表：

如您所见，只有外部填充发生了变化。根据 d3 API, I'm not doing anything wrong, so I don't see where my mistake is. I looked around Whosebug and found this fiddle，更改 padding 值可有效修改条形之间的间隙。我错过了什么？

Answer 1

您的代码存在的问题是您为条形宽度指定了硬编码值，而不是依赖于 d3 的动态计算值。

只需更新指定条形宽度的行，以采用考虑到您之前使用 echelleX.bandwidth():

指定的填充的值

barre.enter()
  .append("rect")
  .attr("class", d => d.mot)
  .attr("x", (d, i) => echelleX(d.mot))
  .attr("y", (d) => echelleY(d.freq))
  .attr("width", echelleX.bandwidth())  // <--- this one
  .attr("height", d => height - echelleY(d.freq))
  .attr("fill", "#ffcc99");

这是一个工作 fiddle 更新。

填充对条形图没有影响

Padding not making a difference on bar chart

scale

d3.js