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()没有参数是一个吸气剂.

因此,在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>