javascript - D3 Selecting based on text value of node - Stack Overflow

admin管理员组

文章数量:1290548

Say I have an 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>

What argument to svg.selectAll() or svg.filter() can I use to select only the text node with value "2" and use .attr() to change its color?

I have found a lot of literature on selecting by attribute, but not by text value.

Say I have an 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>

What argument to svg.selectAll() or svg.filter() can I use to select only the text node with value "2" and use .attr() to change its color?

I have found a lot of literature on selecting by attribute, but not by text value.

• javascript
• d3.js
• svg

Share Improve this question Follow edited Feb 28, 2017 at 5:02 Gerardo Furtado 102k99 gold badges128128 silver badges177177 bronze badges asked Feb 28, 2017 at 4:41 Luke BLuke B 7311 silver badge33 bronze badges 1

• document.getElementById('svg_2').textContent use this code. – santosh gore Commented Feb 28, 2017 at 4:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

text() without arguments is a getter.

Thus, inside the filter function, this code:

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

Will be evaluated as true for any <text> element with "2" as value.

Here is a demo:

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

<script src="https://d3js/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, getters normally return a string. That's why I'm not using the strict equality operator (===). Check it:

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

<script src="https://d3js/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>

$(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>

本文标签： javascriptD3 Selecting based on text value of nodeStack Overflow