填充对条形图没有影响答案

【问题标题】：Padding not making a difference on bar chart填充对条形图没有影响
【发布时间】：2017-08-21 12:12:22
【问题描述】：

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

这是我定义 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，我没有做错任何事情，所以我看不出我的错误在哪里。我环顾 StackOverflow，发现 this fiddle，其中更改 padding 值有效地修改了条之间的间隙。我错过了什么？

【问题讨论】：

请显示您实际绘制矩形的代码。
你能在工作小提琴中重现这种行为吗？
@iulian 这里是一个 jsfiddle ：jsfiddle.net/8gqp214q
@GerardoFurtado 这里是我绘制矩形的代码：jsfiddle.net/8gqp214q

标签： d3.js scale

【解决方案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 更新。

【讨论】：

非常感谢您的回答！