d3获取带有特殊字符的属性 [英] d3 get attribute with special character
问题描述
最近我一直在研究如何使用d3.js修改SVG文件。
到目前为止，它一直是一个伟大的工具，但现在我跑了一个小问题。
我使用inkscape创建了一个SVG文件（我们必须使用的工具是内置的），它将在SVG文件中留下一个额外的属性，我们必须在这个额外的属性中读取（inkscape：label） Json字符串和一些关于如何为对象进行动画处理的额外数据。
但是我不能读取特殊字符，因为它。
如果我在图像中删除它是很好。我也试图逃避与 \\\: （unicode for）的特殊字符，但没有什么似乎有帮助。
但是，如果我使用本机javascript getAttribute（inkscape：label）它工作完美。但是很遗憾，这不是一个解决方案，因为它会打破一些d3的东西。
我如何做同样的d3.js？
SVG文件（属性位于底部）：
<？xml version =1.0 encoding =UTF-8standalone =no？>
<！ - 用Inkscape创建（http://www.inkscape.org/） - >
< svg
xmlns：dc =http://purl.org/dc/elements/1.1/
xmlns：cc =http：// creativecommons。 org / ns＃
xmlns：rdf =http://www.w3.org/1999/02/22-rdf-syntax-ns#
xmlns：svg =http：// www.w3.org/2000/svg
xmlns =http://www.w3.org/2000/svg
xmlns：sodipodi =http://sodipodi.sourceforge.net/ DTD / sodipodi-0.dtd
xmlns：inkscape =http://www.inkscape.org/namespaces/inkscape
width =210mm
height =297mm
id =svg2
version =1.1
inkscape：version =0.48 + devel r12830
onload =var src; if（document.documentURI）src = document .documentURI; else if（this.getSrc）src = this.getSrc（）; else src = document.location.href +''; try {parent.preload.load（src）;} catch（e）{}
viewBox =0 0 744.09447 1052.3622
sodipodi：docname =drawingSVG.svg>
< defs
id =defs4/>
< sodipodi：namedview
id =base
pagecolor =＃ffffff
bordercolor =＃666666
borderopacity =1.0
inkscape：pageopacity =0.0
inkscape：pageshadow =2
inkscape：zoom =0.35
inkscape：cx = - 823.57143
inkscape：cy = 520
inkscape：document-units =px
inkscape：current-layer =layer1
showgrid =false
inkscape：window-width =1920
inkscape：window-height =1027
inkscape：window-x = - 8
inkscape：window-y =22
inkscape：window-maximized =1/>
< metadata
id =metadata7>
< rdf：RDF>
< cc：Work
rdf：about =>
< dc：format> image / svg + xml< / dc：format>
< dc：type
rdf：resource =http://purl.org/dc/dcmitype/StillImage/>
< dc：title>< / dc：title>
< / cc：Work>
< / rdf：RDF>
< / metadata>
< g
inkscape：label =Laag 1
inkscape：groupmode =layer
id =layer1>
< path
sodipodi：type =star
style =fill：＃ffff00; fill-rule：evenodd; stroke：＃000000; stroke-width：1px; stroke-linecap ：butt; stroke-linejoin：miter; stroke-opacity：1
id =path3262
sodipodi：sides =5
sodipodi：cx =237.14284 sodipodi：cy =232.36218
sodipodi：r1 =172.02278
sodipodi：r2 =86.011391
sodipodi：arg1 =2.1311562
sodipodi：arg2 =2.7594747
inkscape：flatsided =false
inkscape：rounded =0
inkscape：randomized =0
d =M 145.71427,378.07647 157.33485,264.43467 70.307332,190.43663 181.97807,166.37122 225.4614,60.736482 l 57.39572,98.768558 113.9017,8.71217 -76.19823,85.10774 26.91179,111.01916 -104.48882，-46.16908 z
inkscape：transform-center-x =3.6097674
inkscape：transform- center-y = - 12.95571
inkscape：label ={& quot; attr& quot;："：& quot;& quot;，& quot; ;& quot;：& quot;：& quot;：& quot;：& quot;& quot;，& quot; ;}}，{& quot; attr& quot;：& quot; opac& quot;，& quot; max& quot;：20，& tag& quot;：& quot; aTag2& quot;}/> llk
< / g>
< / svg>
我尝试获取inkscape：label属性的值为：
console.log（d3.select（＃path3262）。attr（inkscape：label））;不幸的是 pre> console.log（document.getElementById（path3262）。getAttribute（inkscape \\\:label））;
如果我使用
console.log（document.getElementById（path3262）。getAttribute（inkscape：label））;
它工作或如果我更改inkscape：svg文件内的标签和d3代码它也工作
名称中的冒号通常在冒号之后定义名称的命名空间。 D3有处理这个的代码，以避免必须在每个地方显式地指定命名空间。不幸的是，在你的情况下，这会打破，因为它试图解释领导 inkscape 作为命名空间。
解决方法是简单的 - 只需添加另一个冒号作为前缀到您的选择器。 D3将提取这个空的命名空间并将该字符串的其余部分解释为在默认命名空间中。
console.log d3.select（＃path3262）。attr（：inkscape：label））;
完成演示此处。
Lately I have been researching how to modify SVG files with d3.js. Till thus far it has been a great tool to work with but now I ran in a little problem. I create a SVG file with inkscape (a tool we have to use is build in it) and it will leave a extra attribute on the SVG file we have to read (inkscape:label) inside this extra attribute we find a Json string with some extra data on how to animate the object.
However I can't seem to read the special character because of the : in it.
If I remove it in the image it is fine. I also tried to escape the special character with \u003A (unicode for :) but nothing seems to help.
However if I use native javascript getAttribute("inkscape:label") it works perfectly. But sadly this isn't a solution because it will break some d3 stuff.
How can I do the same with d3.js?
SVG File (the attribute is at the bottom):
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
id="svg2"
version="1.1"
inkscape:version="0.48+devel r12830"
onload="var src; if (document.documentURI) src = document.documentURI; else if (this.getSrc) src = this.getSrc(); else src = document.location.href + ''; try {parent.preload.load(src);}catch(e) {}"
viewBox="0 0 744.09447 1052.3622"
sodipodi:docname="drawingSVG.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-823.57143"
inkscape:cy="520"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1027"
inkscape:window-x="-8"
inkscape:window-y="22"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Laag 1"
inkscape:groupmode="layer"
id="layer1">
<path
sodipodi:type="star"
style="fill:#ffff00;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path3262"
sodipodi:sides="5"
sodipodi:cx="237.14284"
sodipodi:cy="232.36218"
sodipodi:r1="172.02278"
sodipodi:r2="86.011391"
sodipodi:arg1="2.1311562"
sodipodi:arg2="2.7594747"
inkscape:flatsided="false"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 145.71427,378.07647 157.33485,264.43467 70.307332,190.43663 181.97807,166.37122 225.4614,60.736482 l 57.39572,98.768558 113.9017,8.71217 -76.19823,85.10774 26.91179,111.01916 -104.48882,-46.16908 z"
inkscape:transform-center-x="3.6097674"
inkscape:transform-center-y="-12.95571"
inkscape:label="{"attr":"color","list":[{"data":"2","param":"#EF8C8C","tag":"aTag"}]},{"attr":"opac","max":20,"min":0,"tag":"aTag2"}" />llk
</g>
</svg>
and I try to get the value of the inkscape:label attribute with:
console.log(d3.select("#path3262").attr("inkscape:label"));
sadly that didn't work neither does
console.log(document.getElementById("path3262").getAttribute("inkscape\u003Alabel"));
if I access it with
console.log(document.getElementById("path3262").getAttribute("inkscape:label"));
it works or if I change the inkscape:label inside the svg file and the d3 code it also works
The colon in a name usually defines the namespace for the name after the colon. D3 has code to deal with this, to avoid having to specify the namespace explicitly everywhere. Unfortunately, this breaks in your case as it tries to interpret the leading inkscape as a namespace.
The workaround is simple though -- simply add another colon as a prefix to your selector. D3 will extract this empty "namespace" and interpret the rest of the string as being in the default namespace.
console.log(d3.select("#path3262").attr(":inkscape:label"));
Complete demo here.
这篇关于d3获取带有特殊字符的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
