Javascript d3将条形图转换为分组条形图

我有一个d3条形图，它根据日期按天的顺序列出数据。这非常有效，但现在我每天需要显示两组数据，以分组条形图格式或只是并排条形图

我认为这需要一点重构，但在愚弄了它并参考了我在网上找到的大量示例之后，图表使用时间刻度和线性刻度的事实让我对这一点的理解受到了影响。我希望有人能帮助我，让这个图表在图表中每天显示两条横线

我当前的x轴设置：

var xTimeScale = d3.time.scale().
domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
.range([0, width]);

var xScale = d3.scale.linear()
.domain([0, data.length])
.range([0, width]);

我的小提琴：

---

因此，从两组独立的数据中，我需要每天有2个条形图——每个条形图表示每个数据集中的一个值。如何完成显示分组栏？如果将数据集合并为一个会更好吗？

首先，让我们考虑两组数据的两个单独的图形。天平是一样的。它将如下所示：

嗯。这一切都很好，但我们如何才能从那里得到一个堆叠的图表呢

嗯，我们需要确保每个勾号都有两个数据段

var data = [{"year":2013,"month":3,"day":5,"count1":18, "count2":3},
            {"year":2013,"month":3,"day":6,"count1":3, "count2":11},
            {"year":2013,"month":3,"day":7,"count1":10,"count2": 8}, 
            {"year":2013,"month":3,"day":8,"count1":18, "count2": 4}];

var maxValue = d3.max(data, function (d) {
  return d.count1 + d.count2;
});

var yScale = d3.scale.linear()
  .domain([0, maxValue])
  .range([0, height]);

然后，在绘制每个记号时，第一条数据应从0开始绘制，第二条数据不应从零开始绘制，而是偏移第一条数据的量

考虑到这一点，其他部分也就就位了：y轴必须是两个数据总和的0到最大值

var data = [{"year":2013,"month":3,"day":5,"count1":18, "count2":3},
            {"year":2013,"month":3,"day":6,"count1":3, "count2":11},
            {"year":2013,"month":3,"day":7,"count1":10,"count2": 8}, 
            {"year":2013,"month":3,"day":8,"count1":18, "count2": 4}];

var maxValue = d3.max(data, function (d) {
  return d.count1 + d.count2;
});

var yScale = d3.scale.linear()
  .domain([0, maxValue])
  .range([0, height]);

现在，更容易将每组条形图视为一个组，并将条形图添加到该组：

   var bars = svg.selectAll(".bar")
      .data(data).enter()
      .append("g")
      .attr("class","bar")
      .attr("transform", function(d){
        return "translate("+xTimeScale(d.date)+",0)"
      });

    var count1Bars = bars.append("rect")
      .attr("class", "count1")
      .attr("height", function(d){return yScale(d.count1)})
      .attr("y", function(d){return height - yScale(d.count1)})
      .attr("width", barWidth);

    var count2Bars = bars.append("rect")
      .attr("class", "count2")
      .attr("height", function(d){return yScale(d.count2)})
      .attr("y", function(d){return height - yScale(d.count1) -yScale(d.count2)})
      .attr("width", barWidth);

    var count1text = bars.append("text")
      .text(function(d){return d.count1})
      .attr("y", function(d){return height})
      .attr("x", barWidth / 2);

    var count2text = bars.append("text")
      .text(function(d){return d.count2})
      .attr("y", function(d){return height - yScale(d.count1)})
      .attr("x", barWidth / 2);

现在，这只是一个粗略的例子，让你走上正轨：

祝你好运！只要想一想你需要什么，事情就会从那里变得井然有序