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

对于任何以“2”为值的<text> 元素，将被评估为true。

这是一个演示：

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>