如何将文本标签附加到一个svg，例如“id = 50”的svg标签？
[英]How do I append the text tag to just one svg e.g. svg tag with “id=50”?
问题描述
如何将文本标签附加到一个svg，例如“id = 50”的svg标签？
此代码将svg标记附加到具有以下属性的body，然后将text标记附加到每个svg（ selectAll ）。 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)
这段代码只是将文本附加到第一个svg（ select ），FIDDLE 这里 ：
//appends text to the first svg
d3.select("body").select("svg").append("text")
.attr("id",202)
如何将文本标签附加到一个svg，例如“id = 50”的svg标签？
这是我的尝试：
d3.select("body").select("#50").append("text")
.attr("id",202)
我也试过select("svg #50")但没有快乐。 任何人都可以建议吗？
2 个解决方案
解决方案1
3 已采纳 2016-06-15 02:54:45
您的问题是无效的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
您可以在HTML5中使用数字ID，因为CSS选择器更难，因为它们不是有效的标识符，所以＃10不起作用 。
在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高，加上连字符（ - ）和下划线（ _）; 它们不能以数字，两个连字符或连字符后跟数字开头......
您可以使用属性选择器解决数字ID的CSS问题，或者将初始数字编码为unicode，如下所示。
看到这将是多么痛苦，你可能会得出结论， 使用数字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>
如何在标签内附加SVG圆
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.