I have several SVG text elements like these at the bottom:
<svg width="750" height="3860"><g transform="translate(10,30)">
<rect class="bar negative Tuvalu" x="29.51594399999999" y="0" width="528.934056" country="Tuvalu" height="20" style="stroke: #ffffff;"></rect>
...
<text class="recipient Somalia unselected_text" y="40" x="558.45" style="font-size: 14px;" country="Somalia" dx="3" dy="-0.45em">Somalia -79.7545</text>
<text class="recipient Tuvalu" y="20" x="558.45" style="font-size: 14px;" country="Tuvalu" dx="3" dy="-0.45em">Tuvalu -85.2432</text>
...
I'm trying to select only the text elements by bar using this where countryname is a classname:
var className = "text." + countryname
var textNode = d3.select("#barchart").select(className)
but the result I get in Chrome is an array of 1 where the 0 position is null. If I select by just ".{countryname}", it works but I want to only specify the text nodes. The first way actually works in my one graph, but when I create a new graph with different data, it doesn't work.
I reproduced your simplified code and it's working as expected. So you will have to show us more.
<div id="barchart">
<svg width="750" height="3860">
<g transform="translate(10,30)">
<rect class="bar negative Tuvalu" x="29.51594399999999" y="0" width="528.934056" country="Tuvalu" height="20" style="stroke: #ffffff;"></rect>
<text class="recipient Somalia unselected_text" y="40" x="558.45" style="font-size: 14px;" country="Somalia" dx="3" dy="-0.45em">Somalia -79.7545</text>
<text class="recipient Tuvalu" y="20" x="558.45" style="font-size: 14px;" country="Tuvalu" dx="3" dy="-0.45em">Tuvalu -85.2432</text>
</g>
</svg>
</div>
<script type="text/javascript">
var countryname = 'Somalia';
var className = "text." + countryname;
var textNode = d3.select("#barchart").select(className);
console.log(textNode);
</script>
BTW, you can also filter the selection set by class name if you need more control:
var textNode = d3.select("#barchart").selectAll("svg text").filter(function(d, i){ return this.classList.contains(countryname); });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.