javascript - Fill rect with pattern -
i using d3.js graph. @ point have show data special part of graph example if values cross boundary show part filling pattern. more clear there in , image.
i rect part cross boundary how can fill pattern? css or canvas tricks?
note : image example not real 1
how this:
js
var svg = d3.select("body").append("svg"); svg .append('defs') .append('pattern') .attr('id', 'diagonalhatch') .attr('patternunits', 'userspaceonuse') .attr('width', 4) .attr('height', 4) .append('path') .attr('d', 'm-1,1 l2,-2 m0,4 l4,-4 m3,5 l2,-2') .attr('stroke', '#000000') .attr('stroke-width', 1); svg.append("rect") .attr("x", 0) .attr("width", 100) .attr("height", 100) .style("fill", 'yellow'); svg.append("rect") .attr("x", 0) .attr("width", 100) .attr("height", 100) .attr('fill', 'url(#diagonalhatch)');
results
Comments
Post a Comment