[英]D3 Selecting based on text value of node
Say I have an svg: 说我有一个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? 我可以使用
svg.selectAll()
或svg.filter()
什么参数来仅选择值为“2”的文本节点并使用.attr()
来改变它的颜色?
I have found a lot of literature on selecting by attribute, but not by text value. 我已经找到了很多关于按属性选择的文献,但没有找到文字值。
text()
without arguments is a getter . 没有参数的
text()
是一个getter 。
Thus, inside the filter
function, this code: 因此,在
filter
函数里面,这段代码:
d3.select(this).text() == 2
Will be evaluated as true
for any <text>
element with "2" as value. 对于任何带有“2”值的
<text>
元素,将被评估为true
。
Here is a demo: 这是一个演示:
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: in D3, getters normally return a string . PS:在D3中,getter通常返回一个字符串 。 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.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>
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.