d3：使用区域绘制多个矩形

我需要在图形内绘制多个填充的矩形，并希望使用svg路径来实现此目的。（我没有使用rect标签，因为性能会随着时间的推移而受损。）d3：使用区域绘制多个矩形

我目前的方法使用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/

来源

2016-09-07 AyKarsi

是这样的：http://jsfiddle.net/zh1vqfos/1/？刚刚改变了数据 –

好一点:)但我会期待从我的数据 – AyKarsi

如果你想几个矩形，你需要定义你的数据一样，

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/

来源

2016-09-07 13:49:30

两个矩形还值得注意的是，如果你的对象键是默认的D3的（x0，y0等），那么你不需要定义在OP中的访问器函数 – danimal

d3：使用区域绘制多个矩形

回答

相关问题