如何将文本标签附加到一个 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标签？
【发布时间】：2016-06-16 03:47:19
【问题描述】：

如何将文本标签附加到一个 svg 例如带有“id=50”的svg标签？

此代码将一个 svg 标记附加到具有以下属性的正文，然后将文本标记附加到每个 svg(selectAll)。小提琴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)

此代码只是将文本附加到第一个 svg(select), FIDDLE here:

//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")，但没有任何乐趣。任何人都可以建议吗？

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

您的问题是 ID 无效...您的 ID 不能以数字开头。

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

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

【讨论】：

谢谢，这是我的fiddle
确定can have一个以数字开头的id
@RobertLongson 好吧，对于id 属性，SVG 规范指的是 XML 1.0 建议，这反过来又要求属性 id 匹配 Name production。根据该规则，值不能以数字开头。
这是 HTML 中的 SVG，而不是独立的 SVG，因此它受 HTML 规则（因为它是使用 html 解析器解析）而不是 XML 规则管理。
@RobertLongson - 我并没有提到幕后的规范“正确性”（因此没有引用/谷歌搜索它们）。我指的是实际情况。无论规格如何，大多数时候您尝试仅使用数字 ID，您会讨厌自己的生活，因为您的 css、javascript、库等会发疯。它是那些规格与实际情况之一。

【解决方案2】：

您可以在 HTML5 中使用数字 ID，但将它们用作 CSS 选择器比较困难，因为它们不是有效的标识符，所以 #10 does not work。

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_)；它们不能以数字、两个连字符或一个连字符后跟一个数字开头...

您可以通过使用属性选择器或将初始数字编码为 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>

【讨论】：