Wie füge ich das Text-Tag an nur ein Svg an, z.B. SVG-Tag mit "id = 50"?

Wie füge ich die Textmarke an nur ein svg an, z.B. SVG-Tag mit "id = 50"?Wie füge ich das Text-Tag an nur ein Svg an, z.B. SVG-Tag mit "id = 50"?

Dieser Code hängt ein Svg-Tag an den Hauptteil mit den folgenden Eigenschaften an und fügt dann jedem svg (selectAll) ein Text-Tag hinzu. 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)

Dieser Code nur anhängt Text zur ersten svg (select), FIDDLE here:

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

Wie anfügen ich den Text-Tag auf nur ein svg z.B. SVG-Tag mit "id = 50"?

Dies ist mein Versuch:

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

ich auch versucht haben select("svg #50") aber keine Freude. Kann jemand beraten?

Quelle

2016-06-15 HattrickNZ

Ihr Problem ist eine ungültige ID ... Sie können keine ID haben, die mit einer Nummer beginnt.

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

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

Quelle

2016-06-15 02:54:45

Dank dafür, hier ist meine [Geige] (https://jsfiddle.net/HattrickNZ/dhhw04b8/6/) – HattrickNZ

Sicher, dass Sie (https [haben kann]: // html.spec.whatwg.org/multipage/dom.html#the-id-attribute) eine ID, die mit einer Nummer beginnt –

@RobertLongson Nun, für das 'id' Attribut bezieht sich die SVG Spezifikation auf die XML 1.0 Empfehlung, die wiederum erfordert, dass das Attribut "id" der [* Name * -Produktion] entspricht (https://www.w3.org/TR/2008/REC-xml-20081126/#NT-NameStartChar). Nach dieser Regel darf der Wert nicht mit einer Zahl beginnen. – altocumulus

können Sie numerische IDs in HTML5 haben, sie als CSS-Selektoren verwendet, ist härter, obwohl, wie sie sind keine gültigen Bezeichner dort so #10 does not work.

In CSS, Identifikatoren (einschließlich Elementnamen, Klassen und IDs in Selektoren) nur die Zeichen [a-zA-Z0-9] und ISO 10646 Zeichen U + 00A0 und höher, und den Bindestrich (-) und der Unterstrich (_); sie können nicht mit einer Ziffer, zwei Bindestrichen oder einem Bindestrich gefolgt von einer Ziffer ...

Sie arbeiten können, um CSS Probleme mit numerischen IDs unter Verwendung eines Attributselektor oder durch Codieren der Anfangsziffer als Unicode beginnen, wie Ich habe es unten getan.

Nachdem Sie gesehen haben, wie schmerzhaft dies sein wird, können Sie gut schließen, dass mit numerischen IDs eine schlechte Idee ist.

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>

Quelle

2016-06-15 06:05:58

tks gut zu wissen – HattrickNZ

Wie füge ich das Text-Tag an nur ein Svg an, z.B. SVG-Tag mit "id = 50"?

Antwort

Verwandte Themen