基本d3：水平条形图

Question

Having trouble with a simple bar chart here, can't find the problem.

See this fiddle http://jsfiddle.net/nn3yex69/

Notice two main problems:

1) The number of bars is not matching the number of elements in dataset .

2) The widths of the largest rect s extend to the full size of the svg despite the desired padding in xScale .

Would really appreciate any help here, I'm stumped.

Answer 1

1) You are selecting all rect elements in the SVG. You already have one rect element: the background! Try changing line 36 to svg.selectAll("rect.bar") .

2) There's padding on the left and the right, so on line 17 use .range([padding,w - (2*padding)]);

Answer 2

You were appending a 'rect' and so on the selectAll('rect'), the first element from the dataset was being overridden by the attributes of the first appended 'rect'.

Removing the following will do the trick:

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

Updated fiddle: http://jsfiddle.net/nn3yex69/1/

I would create a div and style with css to be the containing div to hold your bars.