D3 Auswahl basierend auf Textwert des Knotens

Question

sagen, ich habe eine svg:

<svg> 
    <text font-size="24" id="svg_1" y="63" x="69.5" stroke-width="0" stroke="#000" fill="#000000">1</text> 
    <text font-size="24" id="svg_2" y="194" x="73.5" stroke-width="0" stroke="#000" fill="#000000">2</text> 
    <text font-size="24" id="svg_3" y="313" x="60.5" stroke-width="0" stroke="#000" fill="#000000">3</text> 
</g> 
</svg> 

Was Argument svg.selectAll() oder svg.filter() kann ich nur den Textknoten mit dem Wert „2“ auszuwählen und zu verwenden .attr() seine ändern Farbe?

Ich habe eine Menge Literatur über die Auswahl nach Attribut, aber nicht nach Textwert gefunden.

Answer 1

text() ohne Argumente ist ein Getter.

So in der filter Funktion dieser Code:

d3.select(this).text() == 2 

Wird als true für jedes <text> Element mit "2" als Wert bewertet werden. Hier

ist eine Demo:

d3.selectAll("text") 
 
    .filter(function(){ 
 
    return d3.select(this).text() == 2 
 
    }) 
 
    .attr("fill", "red");

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
    <text font-size="24" id="svg_1" y="20" x="20" stroke-width="0" stroke="#000" fill="#000000">1</text> 
 
    <text font-size="24" id="svg_2" y="50" x="20" stroke-width="0" stroke="#000" fill="#000000">2</text> 
 
    <text font-size="24" id="svg_3" y="80" x="20" stroke-width="0" stroke="#000" fill="#000000">3</text> 
 
</svg>

PS: in D3, Getter normalerweise zurückgeben String. Deshalb verwende ich nicht den strikten Gleichheitsoperator (===). Check it:

var value = d3.select("#svg_2").text(); 
 
console.log("value is: " + value); 
 
console.log("type is: " + typeof(value));

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
    <text font-size="24" id="svg_1" y="20" x="20" stroke-width="0" stroke="#000" fill="#000000">1</text> 
 
    <text font-size="24" id="svg_2" y="50" x="20" stroke-width="0" stroke="#000" fill="#000000">2</text> 
 
    <text font-size="24" id="svg_3" y="80" x="20" stroke-width="0" stroke="#000" fill="#000000">3</text> 
 
</svg>

Answer 2

$(document).ready(function(){ $('#box').keyup(function(){ 
    var valThis = $(this).val().toLowerCase(); 

    var noresult = 0; 
    if(valThis === ""){ 
     $('.navList > text').show(); 
     noresult = 1; 
     $('.no-results-found').remove(); 
    } else { 
     $('.navList > text').each(function(){ 
      var text = $(this).text().toLowerCase(); 
      var match = text.indexOf(valThis); 
      if (match >= 0) { 
       $(this).show(); 
       noresult = 1; 
       $('.no-results-found').remove(); 
      } else { 
       $(this).hide(); 
      } 
     }); }; 

    if (noresult === 0) { 
     $(".navList").append('<text font-size="24" id="" stroke-width="0" stroke="#000" fill="#000000" class="no-results-found">No results found.</text>'); 
    } }); }); 




Add a text box where you can search 

<input placeholder="Search Me" id="box" type="text" /> 



<svg class="navList"> 
    <text font-size="24" id="svg_1" y="20" x="0" stroke-width="0" stroke="#000" fill="#000000">1</text> 
    <text font-size="24" id="svg_2" y="40" x="0" stroke-width="0" stroke="#000" fill="#000000">2</text> 
    <text font-size="24" id="svg_3" y="60" x="0" stroke-width="0" stroke="#000" fill="#000000">3</text> 

</svg>