HattrickNZ HattrickNZ - 5 months ago 17
Javascript Question

How do I append the text tag to just one svg e.g. svg tag with "id=50"?

How do I append the text tag to just one svg e.g. svg tag with "id=50"?

This code appends an svg tag to body with the following properties, and then appends text tag to each svg(

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


This code just appends text to the first svg(
select
), FIDDLE here:

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


How do I append the text tag to just one svg e.g. svg tag with "id=50"?

This is my attempt:

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


I have also tried
select("svg #50")
but no joy. Can anyone advise?

Answer

Your problem is an invalid ID... you can't have an ID that starts with a number.

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

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