テキストタグを1つのsvgに追加するにはどうすればいいですか？ "id = 50"のsvgタグ？

テキストタグを1つのsvgに追加するにはどうすればよいですか？ "id = 50"のsvgタグ？テキストタグを1つのsvgに追加するにはどうすればいいですか？ "id = 50"のsvgタグ？

このコードは、以下のプロパティを持つbodyにsvgタグを追加し、各svg（selectAll）にテキストタグを追加します。私は、例えば一つだけのSVGにテキストタグを追加するにはどうすればよい

//appends text to the first svg 
d3.select("body").select("svg").append("text") 
      .attr("id",202)

：FIDDLE here

var arr =[10,20,30,40,50] //appends an svg tag to body with the following properties d3.select("body").selectAll("svg") .data(arr) .enter() .append("svg") .attr("width",201) .attr("height",202) .attr("id",function(d){ return d;}) //appends text tag to each svg d3.select("body").selectAll("svg").append("text") .attr("id",202)

このコードは、単にFIDDLE here、最初のSVG（select）にテキストを追加します"id = 50"のsvgタグ？

は、これが私の試みです：

d3.select("body").select("#50").append("text") 
      .attr("id",202)

私もselect("svg #50")が、無喜びを試してみました。誰も助言することはできますか？

出典

2016-06-15 HattrickNZ

あなたの問題は無効なIDです...あなたは番号で始まるIDを持つことはできません。

... 
.attr("id",function(d){ return "id-"+d;}) 

... 
d3.select("#id-50").append("text").attr("id",202)

出典

2016-06-15 02:54:45

そのためのおかげで、ここであなたがhttps（[でき]私[フィドル]（https://jsfiddle.net/HattrickNZ/dhhw04b8/6/） – HattrickNZ

は確かです：// html.spec.whatwg.org/multipage/dom.html#the-id-attribute）数字で始まるID –

@RobertLongson「id'属性の場合、SVG仕様はXML 1.0勧告を参照します。属性「id」は[* Name * production]（https://www.w3.org/TR/2008/REC-xml-20081126/#NT-NameStartChar）と一致する必要があります。そのルールに従えば、値は数字で始まらなければならない。 – altocumulus

あなたは難しく、彼らがそう#10 does not work有効な識別子でないといえCSSセレクタとしてそれらを使用して、HTML5に数値IDを持つことができます。 CSSで

、文字だけを含めることができる[-ZA-Z0-9]およびISO 10646の文字U + 00A0とより高い、プラスハイフン（要素名、クラス、およびセレクタ内のIDを含む）識別子（ - ）とアンダースコア（_）。彼らは...桁、2つのハイフン、または数字が続くハイフンで始めることはできません

あなたは、またはのようにUnicodeとして最初の数字を符号化することにより、属性セレクタを使って、数値IDとCSSの問題を回避することができ

私は以下でやった。

これがどれほど苦しいのか分かりましたが、数字のIDを使用するは悪い考えです。です。

var arr =[10,20,30,40,50] 
 

 
//appends an svg tag to body with the following properties 
 
d3.select("body").selectAll("svg") 
 
       .data(arr) 
 
       .enter() 
 
       .append("svg") 
 
       .attr("width",201) 
 
       .attr("height",202) 
 
       .attr("id",function(d){ return d;}) 
 

 

 
d3.select("body").select('[id="20"]').append("text") 
 
      .attr("id",202).attr("y", 50).text("hello") 
 

 
d3.select("body").select('#\\31 0').append("text") 
 
      .attr("id",203).attr("y", 80).text("again")

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<body></body>

出典

2016-06-15 06:05:58

tks知っておきたい – HattrickNZ

テキストタグを1つのsvgに追加するにはどうすればいいですか？ "id = 50"のsvgタグ？

答えて

関連する問題