पैटर्न

Question

के साथ rect भरें मैं ग्राफ के लिए d3.js का उपयोग कर रहा हूँ। किसी बिंदु पर मुझे ग्राफ के कुछ विशेष भाग के साथ डेटा दिखाना है उदाहरण के लिए यदि मान कुछ सीमा पार करते हैं तो उस भाग को पैटर्न भरने के साथ दिखाएं। और अधिक स्पष्ट और छवि के लिए है।

मुझे सीमा पार करने वाले भाग भाग मिलते हैं लेकिन मैं इसे इस पैटर्न से कैसे भर सकता हूं? कोई सीएसएस या कैनवास चालें?

नोट: इस छवि को सिर्फ एक उदाहरण है नहीं असली

Answer 1

कैसे इस बारे में:

Live Demo

जे एस

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

परिणाम

Answer 2

को बदलने के लिए रंग आसान होगा, बस एक सशर्त if बयान। के रूप में आप पहली बार अपने एसवीजी को defs तत्व जोड़ने के लिए है और फिर इसे

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

के लिए अपने प्रतिमान जोड़ने

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

एक पैटर्न को जोड़ने के लिए एक छोटे से अधिक शामिल होगा: यहाँ एक उदाहरण मैं पहले इस्तेमाल किया गया है