Javascript 基础d3：水平条形图

这里的简单条形图有问题，找不到问题

看到这把小提琴了吗

请注意两个主要问题：

1） 条数与

数据集中的元素数不匹配

2） 最大的
rect
s的宽度延伸到
svg
的全尺寸，尽管
xScale
中有所需的
padding

我真的很感激这里的任何帮助，我被难住了
 1）您正在选择SVG中的所有
rect
元素。您已经有一个
rect
元素：背景！尝试将第36行更改为
svg。选择All（“rect.bar”）

2） 左边和右边都有填充，所以在第17行中使用
.range（[padding，w-（2*padding）]）
1）您正在选择SVG中的所有
rect
元素。您已经有一个
rect
元素：背景！尝试将第36行更改为
svg。选择All（“rect.bar”）

2） 左边和右边都有填充，所以在第17行中使用
.range（[padding，w-（2*padding）]）
当您在selectAll（'rect'）上附加一个'rect'，数据集中的第一个元素被第一个附加的'rect'的属性覆盖

删除以下内容即可完成此操作：

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

更新小提琴：

我将创建一个div，并使用css样式作为包含div的样式，以容纳您的条。
您在selectAll（'rect'）上附加了一个'rect'，数据集中的第一个元素被第一个附加的'rect'的属性覆盖

删除以下内容即可完成此操作：

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

更新小提琴：

我将创建一个div，并使用css样式作为包含div的样式，以保存您的条。
没问题！如果你能接受答案，那就太好了。我很乐意，似乎有一个最短的计时器，几分钟后就可以了。你能详细说明一下吗？目标是将选择器更改为不包含仅为背景色的
rect
。那么，为什么选择器
rect.bar
可以工作，即使我没有定义
bar
类？（我注意到，
rect.anything
都可以）您需要一个空的选择，以便所有数据都绑定到输入的元素，而不是更新（现有）元素。较长的答案是理解D3选择，从这里开始：没问题！如果你能接受答案，那就太好了。我很乐意，似乎有一个最短的计时器，几分钟后就可以了。你能详细说明一下吗？目标是将选择器更改为不包含仅为背景色的
rect
。那么，为什么选择器
rect.bar
可以工作，即使我没有定义
bar
类？（我注意到，
rect.anything
都可以）您需要一个空的选择，以便所有数据都绑定到输入的元素，而不是更新（现有）元素。较长的答案是了解D3选择，从这里开始：