填充对条形图没有影响

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

这是我得到的图表：

如您所见，只有外部填充发生了变化。根据{{​​3}}，我没有做错任何事，所以我不知道我的错误在哪里。我查看了StackOverflow并找到d3 API，其中更改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更新。