javascript - d3 : drawing multiple rectangles using areas

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/