Desen

Question

ile doldurun Grafik için d3.js kullanıyorum. Bir noktada, örneğin, bir sınırın ötesine geçiyorsa ve o bölümü dolum paterni ile gösteriyorsa, verileri özel grafik parçasıyla göstermek zorundayım. daha açık için orada ve görüntü var.

Sınırı geçen rect parçasını alıyorum ama bu desenle nasıl doldurabilirim? herhangi bir css veya tuval hilesi?

Not: Bu resim sadece bir örnektir değil, renk basit olurdu sadece şartlı if deyimi değiştirmek için gerçek bir

Answer 1

Şöyle yapsak:

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

Sonuçlar

Answer 2

. öncelikle SVG defs eleman eklemek ve ardından bu

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

için desen eklerken biraz daha fazla dahil olacak bir model eklemek için

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

: Burada ben daha önce kullandım bir örnek