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/

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

1 个答案: