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。