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 filli

Answer 1

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);