如何将文本标签附加到一个svg，例如“id = 50”的svg标签？
[英]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 eg svg tag with "id=50"? 
如何将文本标签附加到一个svg，例如“id = 50”的svg标签？
This code appends an svg tag to body with the following properties, and then appends text tag to each svg( selectAll ). 此代码将svg标记附加到具有以下属性的body，然后将text标记附加到每个svg（ selectAll ）。 FIDDLE here FIDDLE 在这里
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 : 这段代码只是将文本附加到第一个svg（ select ），FIDDLE 这里 ：
//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 eg svg tag with "id=50"? 如何将文本标签附加到一个svg，例如“id = 50”的svg标签？
This is my attempt: 这是我的尝试：
d3.select("body").select("#50").append("text")
.attr("id",202)
I have also tried select("svg #50") but no joy. 我也试过select("svg #50")但没有快乐。 Can anyone advise? 任何人都可以建议吗？
2 个解决方案
解决方案1
3 已采纳 2016-06-15 02:54:45
Your problem is an invalid ID... you can't have an ID that starts with a number. 您的问题是无效的ID ...您不能拥有以数字开头的ID。
...
.attr("id",function(d){ return "id-"+d;})
...
d3.select("#id-50").append("text").attr("id",202)
解决方案2
0 2016-06-15 06:05:58
You can have numeric ids in HTML5, using them as CSS selectors is harder though as they aren't valid identifiers there so #10 does not work . 您可以在HTML5中使用数字ID，因为CSS选择器更难，因为它们不是有效的标识符，所以＃10不起作用 。
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_);
You can work around CSS issues with numeric ids by using an attribute selector, or by encoding the initial digit as unicode as I've done below. 您可以使用属性选择器解决数字ID的CSS问题，或者将初始数字编码为unicode，如下所示。
Having seen how painful this is going to be, you might well conclude that using numeric ids is a bad idea . 看到这将是多么痛苦，你可能会得出结论， 使用数字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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.