d3.jsセレクタでテキスト要素のテキストのみを取得する

Question

My svgにはtext要素とtitleがあります。私はZombieland (9)であるtext要素のテキストだけを取得する必要があります。しかし、それは私にZombieland (9)Zombieland (9)であり、それはtextとtitle要素のテキストです。

以下は私のセレクタです。

d3.select(".horizontalLable").text(); // return "Zombieland (9)Zombieland (9)" 

<text class="horizontalLable" text-anchor="end" alignment-baseline="hanging" style="font-size: 10px; alignment-baseline: hanging; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; fill: rgb(0, 0, 0);" transform="translate(365,2)">Zombieland (9)<title>Zombieland (9)</title></text> 

Answer 1

はこれを行うにはCSSの選択方法はありませんが、あなたはそれを達成するために戻って再度タイトルを、タイトルを削除するテキストを選択して追加することができます。

var text = d3.select(".horizontalLable"); 
 
var title = d3.select(".horizontalLable > title"); 
 
text.node().removeChild(title.node()); 
 
console.log(text.text()); 
 
text.node().append(title.node());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg> 
 
<text class="horizontalLable" text-anchor="end" alignment-baseline="hanging" style="font-size: 10px; alignment-baseline: hanging; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; fill: rgb(0, 0, 0);" transform="translate(365,2)">Zombieland (9)<title>Zombieland (9)</title></text> 
 
</svg>

Answer 2

それはあなたがテキストではなくノードに再利用可能なセレクタであると仮定すると、仮想にテキストノードをコピーしてDOMを変更せずにRobert's Answer上に構築することが可能ですあなたはそれを操作することができます。個人的に

var text = d3.select(".horizontalLable"); 
 
var copy = d3.select(text.node().cloneNode(true)) 
 
var title = copy.select("title"); 
 
copy.node().removeChild(title.node()); 
 
console.log(copy.text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg> 
 
<text class="horizontalLable" text-anchor="end" alignment-baseline="hanging" style="font-size: 10px; alignment-baseline: hanging; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; fill: rgb(0, 0, 0);" transform="translate(365,2)">Zombieland (9)<title>Zombieland (9)</title></text> 
 
</svg>

Answer 3

、私はすでにそこにあるいくつかのテキストを抽出するためにDOMを操作していない非侵入的なアプローチを好むだろう。 <text>要素にはchildNodesのプロパティがあり、typesの2つのノードを保持します。実際のテキスト内容を含むTEXT_NODEのタイプと<title>のタイプのもう1つのタイプがあります。このように、あなたは簡単に興味があります。また

var text = d3.select(".horizontalLable").node(); 
 
var textNodes = Array.from(text.childNodes)   
 
    .filter(c => c.nodeType === Node.TEXT_NODE); 
 
    
 
console.log(textNodes[0].textContent);

<script src="https://d3js.org/d3.v4.js"></script> 
 

 
<svg> 
 
    <text class="horizontalLable" text-anchor="end" alignment-baseline="hanging" style="font-size: 10px; alignment-baseline: hanging; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; fill: rgb(0, 0, 0);" transform="translate(365,2)">Zombieland (9)<title>Zombieland (9)</title></text> 
 
</svg>

、基本的には同じあり、さらにD3- っぽい、あなたは可能性が一つだけ（複数可）を探しているこれらのノードを取捨選択することができますこのような何かを：

var text = d3.select(".horizontalLable") 
 
    .selectAll(function() { 
 
    return Array.from(this.childNodes)   
 
     .filter(c => c.nodeType === Node.TEXT_NODE) 
 
    }) 
 
    .text(); 
 
    
 
console.log(text);

<script src="https://d3js.org/d3.v4.js"></script> 
 

 
<svg> 
 
    <text class="horizontalLable" text-anchor="end" alignment-baseline="hanging" style="font-size: 10px; alignment-baseline: hanging; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; fill: rgb(0, 0, 0);" transform="translate(365,2)">Zombieland (9)<title>Zombieland (9)</title></text> 
 
</svg>

---

サイドノート： DOMをいじるので、それは私がこの質問への回答によって提案されたソリューションを比較するtest caseを設定することを決定したパフォーマンスに来るとき、非常に高価な操作です。それが判明したように、私の最初のアプローチは、ほとんどがバニラJSを使用してDOMを操作することを避けるため、最も高速です。 D3を使用する第2のソリューションは、わずか10％しか遅くはありません。第3に、Robert Longson'sの削除とそれに続く<title>の追加があります。使用しているブラウザによっては30-50％遅くなります。最も遅い実装は、ノードのクローニングが約70〜80％遅くなるJohn'sです。

でも、これらの結果はあまり強調しすぎてはいけません。私はテストケースを行ったばかりの好奇心の中で、結果を共有したいと思っていました。価値のあることについては、ここでの主な関心事は、コードの使いやすさ、明快さ、簡潔さ、明瞭さです。