javascript - d3: drawing multiple rectangles using areas -
i need draw draw many filled rectangles inside graph , achieve using svg paths. (i'm not using rect tag because perfomance suffer on time.)
my current approach uses d3.svg.area generate path each area, rectangles not being drawn properly.
as far understand rendered path attribute, seems path missing moveto per rectangle.
the following simplified code of problem.
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/
if want several rectangles, need define data that
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 ]; and call
chart.selectall('path') .data(data) .enter() .append('path') .attr('d', areafunc) .attr('class', 'absences area') .attr('style', 'fill:blue;stroke:black;stroke-width:1'); 
Comments
Post a Comment