Javascript D3.js（或类似）重叠条形图？

使用D3.js是否有一个选项可以将一个条覆盖在另一个条上

我需要两个独立的列来表示开始和结束时间（x轴）与计数（y轴）。我希望两列相互重叠（类似的开始时间，例如x1=8:45am，x2=10:05，结束时间相同。y1=90，y2=108），两列的透明度都在0.5左右，因此可以在公共时间/计数范围内看到每列

使用Highcharts的类似示例：

我需要创建一个图表，其中

• 列宽取决于（结束时间-开始时间）
• x列原点取决于开始时间
• 列高度取决于y值
• 列的不透明度需要小于1

---

d3.js

要求您明确地将钢筋放置在坐标处，因此，您可以将钢筋放置在任何您喜欢的位置：

  // create a group for your overlapped bars
  var g = svg.selectAll(".bars")
    .data(data)
    .enter().append("g")

  // place the first bar  
  g.append("rect")
    .attr("class", "bar1")
    .attr("x", function(d) {
      return x(d.letter) + 10; // center it
    })
    .attr("width", x.rangeBand() - 20) // make it slimmer
    .attr("y", function(d) {
      return y(d.col1);
    })
    .attr("height", function(d) {
      return height - y(d.col1);
    });

  // place the second bar on top of it
  g.append("rect")
    .attr("class", "bar2")
    .attr("x", function(d) {
      return x(d.letter);
    })
    .attr("width", x.rangeBand())
    .attr("y", function(d) {
      return y(d.col2);
    })
    .attr("height", function(d) {
      return height - y(d.col2);
    });

这里有一个简单的例子

编辑

为了增加时间，您必须进行一些更改

设置时间格式化程序，从文件中解析日期/时间：

// say date/times are local 20160622 15:00
var timeFormatter = d3.time.format("%Y%m%d %H:%M")

为轴设置时间x刻度：

// x scale showing 1 day - 06/22/2015
var x = d3.time.scale()
  .range([0,width])
  .domain([timeFormatter.parse("20150621 00:00"), timeFormatter.parse("20150622 00:00")])

绘制矩形时，with是从endTime到startTime的像素数：

 g.append("rect")
    .attr("class", "bar1")
    .attr("x", function(d) {
      return x(d.startTime1); // start at startTime
    })
    .attr("width", function(d,i){
      return x(d.endTime1) - x(d.startTime1); // pixel width from end to start
    })
    .attr("y", function(d) {
      return y(d.col1);
    })
    .attr("height", function(d) {
      return height - y(d.col1);
    });

---

示例。

非常有效-谢谢！下一个也是最后一个查询-图表上只有两列（一个灰色，一个蓝色）。我使用一个酒吧代表一个时间段，例如上午8:10到下午15:00，另一个酒吧时间为09:45到15:00。我可以让每个条的宽度反映时间段吗？不幸的是，我不能投票给这个优秀的答案（没有足够的分数）。再次感谢Mark-这是一个出色的解决方案，完全符合要求。

 g.append("rect")
    .attr("class", "bar1")
    .attr("x", function(d) {
      return x(d.startTime1); // start at startTime
    })
    .attr("width", function(d,i){
      return x(d.endTime1) - x(d.startTime1); // pixel width from end to start
    })
    .attr("y", function(d) {
      return y(d.col1);
    })
    .attr("height", function(d) {
      return height - y(d.col1);
    });