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

Question

我正在尝试在我的图表中添加第二个条形图。元素已正确附加，但位置不正确且高度不正确。我希望数据在 x 轴的第 1 个位置有 2 个条，一个高度为 2，另一个高度为 3，依此类推。

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");

我怀疑 svg2 变换是问题所在，但在尝试摆弄它一个小时后，我似乎可以得到我想要的东西。我查看了这个问题并尝试将其实现到我的问题中。 D3.js grouped bar chart

Answer 1

由于数据中的每个元素都包含两个条形的值，因此您必须将它们作为一个组添加。也就是说，为数组中的每个元素在图表中添加一个“g”元素，然后为 inner_array[1] 和 inner_array[2] 添加一个条形图。

希望这能让你走上正确的道路，基本上我所做的只是你的//bar 评论之后的内容。

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");

注意:有更优雅的方法可以做到这一点。我只是向您展示如何将栏添加到您现有的代码中。请看http://bl.ocks.org/mbostock/3887051以获得进一步的指导。