基本 d3：水平条形图

Question

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

看到这个fiddlehttp://jsfiddle.net/nn3yex69/

注意两个主要问题：

1) 柱数与 dataset 中的元素数不匹配。

2) 尽管 xScale 中需要 padding，但最大 rect 的宽度扩展到 svg 的全尺寸。

真的很感激这里的任何帮助，我很难过。

Answer 1

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

2)左右两边有padding，所以第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)  

已更新 fiddle：http://jsfiddle.net/nn3yex69/1/

我会创建一个 div 和带有 css 的样式作为包含 div 的样式。