d3：使用區域繪製多個矩形

Question

我需要在圖形內繪製多個填充的矩形，並希望使用svg路徑來實現此目的。 （我沒有使用rect標籤，因爲性能會隨着時間的推移而受損。）

我目前的方法使用d3.svg.area爲每個區域生成路徑，但矩形未被正確繪製。

據我瞭解渲染的路徑屬性，似乎路徑缺少moveTo每個矩形。

以下是我簡化的問題代碼。

var data = [ 
    {x0:0,x1:50,y0:0,y1:10}, 
    {x10:0,x1:60,y0:20,y1:30}, 
    ]; 

var width = 500; 
var barHeight = 20; 

var areaFunc = d3.svg.area() 
      //.interpolate('step')    
      .x0(function(d){return d.x0;}) 
      .x1(function(d){return d.x1;}) 
      .y0(function(d){return d.y0;}) 
      .y1(function(d){return d.y1;}); 

var chart = d3.select('#chart') 
    .attr('width', width) 
    .attr('height', barHeight * data.length); 

chart.append('path') 
      //.data(data) 
      .attr('d', areaFunc(data)) 
      .attr('class', 'absences area') 
      .attr('style', 'fill:blue;stroke:black;stroke-width:1');  

的jsfiddle：http://jsfiddle.net/3kLdkgz8/

Answer 1

如果你想幾個矩形，你需要定義你的數據一樣，

var data = [ 
    [{x0:10,x1:60,y0:0,y1:0},{x0:10,x1:60,y0:20,y1:20}], // rect 1 
    [{x0:100,x1:600,y0:20,y1:20},{x0:100,x1:600,y0:200,y1:200}]// rect 2 
]; 

，並調用它像

chart.selectAll('path') 
     .data(data) 
     .enter() 
     .append('path') 
     .attr('d', areaFunc) 
     .attr('class', 'absences area') 
     .attr('style', 'fill:blue;stroke:black;stroke-width:1'); 

見http://jsfiddle.net/zh1vqfos/2/