如何让第二个条形显示在分组条形图上？

Question

I'm trying to get a second bar into my graph. The elements are correctly getting appended but not in the correct location and not the correct height. What I want from the data to be at the 1 position in the x-axis to have 2 bars one with a height of 2 and the other height of 3 and so on.

http://jsfiddle.net/626uesbh/4/

var svg2 = d3.select("#histogram").append("svg2")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg2.selectAll(".rect")
      .data(data)
    .enter().append("g")
      .attr("transform", "translate(0, 100)")
    .append("rect")
      .attr("class", "rect")
      .attr("width", 10)
      .attr("height", function(d) { return height - y2Map(d); })
      .attr("x", xMap)
      .attr("y", yMap)
      .style("fill", "blue");

I suspect svg2 transform is the problem but after trying fiddling with it for an hour I can seem to get what I want. I looked at this question and tried to implement it into my problem. D3.js grouped bar chart

Answer 1

Since each element in your data contains the values for both bars, you have to add them as a group. That is, add a 'g' element to the chart for each element in the array, then add a bar for inner_array[1] and inner_array[2].

Hopefully this gets you on the right path, essentially all I changed was the stuff after your //bar comment.

http://jsfiddle.net/626uesbh/6/

  // bar
  var bar_groups = svg.selectAll('.bar-group')
      .data(data)
      .enter().append('g')
      .attr('class', 'bar-group');

  bar_groups.append('rect')
      .attr("class", "rect")
      .attr("width", 10)
      .attr("height", function(d) { return height - yScale(d[1]); })
      .attr("x", function(d) {
          return xScale(d[0]) - 5;
      })
      .attr("y", function(d) {
          return yScale(d[1]);
      })
      .style("fill", "green");

  bar_groups.append('rect')
      .attr("class", "rect")
      .attr("width", 10)
      .attr("height", function(d) { return height - yScale(d[2]); })
      .attr("x", function(d) {
          return xScale(d[0]) + 5;
      })
      .attr("y", function(d) {
          return yScale(d[2]);
      })
      .style("fill", "blue");

Note: there are much more elegant ways to do this. I am only showing you how to add the bars to your existing code. Please take a look at http://bl.ocks.org/mbostock/3887051 for further guidance.