英文:
Compose SVG with d3 from DOM elements
问题
我想使用D3.js显示掷两个骰子的可能结果，因此需要重复使用相同的骰子面。所以我想将它们转换成组件。
我的方法是这样的：
function dieFace(d){
const elt = d3.create("rect")
.attr("x", 10 + 200 * d[0])
.attr("y", 10 + 120 * d[1])
.attr("width", 100)
.attr("height", 100)
.attr("rx", 24)
.attr("ry", 24)
.attr("fill", "#000")
.attr("stroke-width", "5")
return elt.node()
}
然后像这样使用这个组件（还参考这个问题）：
{
const width = 200;
const height = 200;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
svg.data([[0,0]]).append(dieFace)
return svg.node()
}
不幸的是，上面的代码不显示任何内容。但是使用 F12 键，可以看到SVG实际上包含了rect 组件。发生了什么？
英文:
I want to display possible outcomes of throwing two dice using D3.js and therefore repeatedly need the same die faces. So I wanted to turn those into components.
My approach was this:
function dieFace(d){
const elt = d3.create("rect")
.attr("x", 10 + 200 * d[0])
.attr("y", 10 + 120 * d[1])
.attr("width", 100)
.attr("height", 100)
.attr("rx", 24)
.attr("ry", 24)
.attr("fill", "#000")
.attr("stroke-width", "5")
return elt.node()
}
and then use this component like this (also cf. this question):
{
const width = 200;
const height = 200;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
svg.data([[0,0]]).append(dieFace)
return svg.node()
}
unfortunately, the above does not display anything. But using F12 the svg does actually contain the rect component
what is happening here?
答案1
得分: 1
根据d3的ReadMe，如果您不是在创建HTML元素，则需要指定正确的命名空间。幸运的是，d3使这变得非常容易。
d3.create(name) · 源码
给定指定的元素名称，返回包含当前文档中给定名称的分离元素的单元素选择。该方法假定HTML命名空间，因此在创建SVG或其他非HTML元素时，您必须明确指定命名空间；有关受支持的命名空间前缀的详细信息，请参见命名空间。
d3.create("svg:g") // 一个SVG G元素
d3.create("g") // 一个HTML G（未知）元素
因此，您需要在您的代码中使用d3.create("svg:rect")。
英文:
Per the ReadMe for d3 you need to specify the correct namespace if you're not creating HTML elements. Fortunately d3 makes this really easy
> d3.create(name) · Source
>
> Given the specified element name, returns a single-element selection containing a detached element of the given name in the current document. This method assumes the HTML namespace, so you must specify a namespace explicitly when creating SVG or other non-HTML elements; see namespace for details on supported namespace prefixes.
>
> d3.create("svg:g") // an SVG G element
> d3.create("g") // an HTML G (unknown) element
So you need d3.create("svg:rect") in your code.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论