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:

live demo

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