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

Question

使用D3.js是否有一个选项可以将一个栏叠加到另一个栏上？

我需要两个独立的列来指示计数（y轴）的开始和结束时间（x轴）。我希望两列彼此重叠（类似的开始时间，例如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。