基本d3：水平条形图

Question

在这里使用简单的条形图遇到麻烦，找不到问题。

看到这个小提琴http://jsfiddle.net/nn3yex69/

注意两个主要问题：

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

2）最大的rect的宽度扩展到svg的整个大小，尽管在xScale需要padding 。

我很感激这里的任何帮助。

Answer 1

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

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

Answer 2

您要附加一个“ rect”，依此类推，例如selectAll（'rect'），数据集中的第一个元素被第一个附加的“ rect”的属性覆盖。

删除以下内容将达到目的：

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

更新的提琴： http : //jsfiddle.net/nn3yex69/1/

我将使用css创建一个div和样式，使其成为容纳栏的包含div。