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

Question

使用D3.js是否可以选择将一个条形图叠加在另一个条形图上？

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

使用Highcharts的类似示例：

http://jsfiddle.net/gopinaghr/q8Udk/

// This page provides an example in highcharts
{ I need same for D3}

我需要创建一个图表

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

Answer 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);
    });

这是一个快速example。

<强> EDITS

要及时添加，您必须进行一些更改。

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

// 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")])

当你绘制矩形时，宽度是从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);
    });

示例here。