Fill rect with pattern

Question

I am using d3.js for graph. at some point i have to show data with some special part of graph for example if the values is cross some boundary then show that part with filling pattern. for more clear is there in and image.

i get the rect part that cross the boundary but how can i fill it with this pattern? any css or canvas tricks?

enter image description here

Note : this image is just an example not the real one

possible duplicate of [Simple fill pattern in svg : diagonal hatching](http://stackoverflow.com/questions/13069446/simple-fill-pattern-in-svg-diagonal-hatching) — Brandon Boone, Jul 21 '13 at 21:03

score 29 · Accepted Answer · answered Jul 21 '13 at 21:30

29

How about 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

enter image description here

answered Jul 21 '13 at 21:30

Brandon Boone

16,281
4
73
100

1

i use pattern to fill the rect but this pattern loses it's original color can we keep both like fill color and transparent pattern both? – Amit Rana Jul 22 '13 at 06:47
1

You have to duplicate the rectangles (one with the color and one with the pattern) since you cannot have both a fill color and a fill pattern on the same rectangle. You may be able to modify the pattern itself and create a background color within it, but that's beyond my knowledge. Even if you could, you'd then need the pattern duplicated per color. – Brandon Boone Jul 22 '13 at 11:49

score 2 · Answer 2 · answered Jul 21 '13 at 20:45

To change the color would be simple, just a conditional if statement. Here's an example i've used before:

svg.selectAll("dot")    
        .data(data)                                     
    .enter().append("circle")                               
        .attr("r", 3.5)     
        .style("fill", function(d) {            // <== Add these
            if (d.close >= 50) {return "red"}  // <== Add these
            else    { return "black" }          // <== Add these
        ;})                                     // <== Add these
        .attr("cx", function(d) { return x(d.date); })       
        .attr("cy", function(d) { return y(d.close); });

To add a pattern would be a little more involved as you first have to add the defs element to your SVG and then add your pattern to it

//first create you SVG or select it
var svg = d3.select("#container").append("svg");

//then append the defs and the pattern
svg.append("defs").append("pattern")
    .attr("width", 5)
    .attr("height", 5);

here i have if condition in that decide the which rect is it and i use pattern to fill that rect but this pattern lost it's original color can we keep both like fill color and transparent the pattern? — Amit Rana, Jul 22 '13 at 06:42
i use pattern to fill the rect but this pattern loses it's original color can we keep both like fill color and transparent pattern both? — Amit Rana, Jul 22 '13 at 06:48

Fill rect with pattern

2 Answers2

Linked