Remplissez rect avec motif

Je suis en utilisant d3.js pour le graphique. à un certain moment, j'ai l'affichage de données avec une certaine partie spéciale de graphique par exemple, si les valeurs de la croix-limite montrons ensuite que la partie avec motif de remplissage. pour de plus clair, c'est là, dans et par l'image.

- je obtenir le rect partie qui traversent la frontière, mais comment puis-je le remplir avec ce modèle?
css ou toile astuces?

Remplissez rect avec motif

Note : cette image est juste un exemple qui n'est pas le vrai

source d'informationauteur Amit Rana

  1. 20

    Comment à ce sujet:

    Démonstration En Direct

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

    Résultats

    Remplissez rect avec motif

  2. 1

    Pour changer la couleur serait simple, il suffit d'un conditionnel if déclaration. Voici un exemple que j'ai utilisé avant:

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

    Pour ajouter un motif serait un peu plus impliqué que vous devez d'abord ajouter les defs élément de votre SVG puis ajouter le motif de

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