Question

这里有一个简单的条形图有问题，无法找到问题。

注意两个主要问题：

1）条形数与dataset中的元素数不匹配。

2）尽管rect中需要svg，但最大padding s的宽度会扩展到xScale的完整尺寸。

非常感谢这里的任何帮助，我很难过。

Answer 1

1）您正在选择SVG中的所有rect个元素。你已经有一个rect元素：背景！尝试将第36行更改为svg.selectAll("rect.bar")。

2）左侧和右侧有填充，因此第17行使用.range([padding,w - (2*padding)]);

Answer 2

你在selectAll（'rect'）上附加'rect'等等，数据集中的第一个元素被第一个附加'rect'的属性覆盖。

删除以下内容可以解决问题：

svg.append("rect")
    .attr("height", h)
    .attr("width", w)
    .attr("stroke", "black")
    .attr("fill", "#ccc")
    .attr("stroke-width", 2)

我会用css创建一个div和样式作为包含div来保存你的吧。