D3選擇基於節點

Question

說的文本值我有一個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> 

什麼參數svg.selectAll()或svg.filter()我可以用它來選擇只值「2」的文本節點，並使用.attr()改變其顏色？

我發現了很多關於按屬性選擇的文獻，但沒有找到文本值。

Answer 1

text()無參數是getter。

因此，filter函數內部，此代碼：

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

將被true評價爲 「2」 的任何<text>元素值。

這裏是一個演示：

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：在D3中，通常的getter返回一個字符串。這就是爲什麼我沒有使用嚴格的相等運算符（===）。檢查它：

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>