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()的哪个参数来仅选择值为＆＃34; 2＆＃34;的文本节点。并使用.attr()来改变颜色？

我发现了很多关于按属性选择的文献，但没有找到文字值。

Answer 1

没有参数的

text()是 getter 。

因此，在filter函数内，此代码：

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

对于任何{2}作为值的true元素，

将被评估为<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>

D3根据节点的文本值进行选择

2 个答案: