0

下部に次のような SVG テキスト要素がいくつかあります。

<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>
...

国名がクラス名であるこれを使用して、バーでテキスト要素のみを選択しようとしています:

var className = "text." + countryname
var textNode = d3.select("#barchart").select(className)

しかし、Chrome で取得した結果は、0 の位置が null である 1 の配列です。「.{countryname}」だけで選択すると機能しますが、テキストノードのみを指定したいです。最初の方法は実際には 1 つのグラフで機能しますが、別のデータで新しいグラフを作成すると機能しません。

4

1 に答える 1

1

簡略化されたコードを再現しましたが、期待どおりに動作しています。だからあなたは私たちにもっと見せなければならないでしょう。

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

ところで、さらに制御が必要な場合は、選択セットをクラス名でフィルタリングすることもできます。

var textNode = d3.select("#barchart").selectAll("svg text").filter(function(d, i){ return this.classList.contains(countryname); });
于 2013-04-30T23:26:03.560 に答える