Javascript d3.create（）返回带有.node（）的元素，但不显示在浏览器中

我试图让D3.js使用D3.create生成矩形元素。它无法工作/显示

首先，我创建一个矩形函数，它返回一个元素：

函数矩形{ _el=d3.createrect .黑色 .黑色 .笔划宽度，10px .attrx，0 .attry，0 .宽度，300 .身高200； 返回 } 然后，我创建一个SVG选择，并在其中附加一个rectangle.node实例：

const SVG_WIDTH=1000； const SVG_HEIGHT=1000； svg=d3.selectbody.appendsvg .attrwidth，SVG_宽度 .attrheight，SVG_HEIGHT .attrid，已生成 svg.append //=>rectangle.node 函数{return rectangle.node} 然而，在我的浏览器Google Chrome中没有视觉输出

但是，当我通过Chrome的“元素”选项卡查看DOM时，D3生成了正确的SVG/矩形代码：

事实上，如果我复制上述代码并将其放置在HTML文件中的任何其他位置而不进行修改，则浏览器中会出现一个矩形

为什么SVG对浏览器DOM的修改没有显示/工作，但它生成的代码是正确的，并且在手动复制/粘贴到HTML中时会显示出来

发件人：

此方法采用HTML名称空间，因此在创建SVG或其他非HTML元素时必须显式指定名称空间[…]

d3.createsvg//相当于svg:svg d3.createsvg:svg//更明确 d3.createsvg:g//一个SVG元素 d3.createg//一个HTML G未知元素 因此，创建矩形的函数应该使用svg:rect。否则，它将创建一个HTML矩形而不是SVG矩形

默认情况下，d3.create方法在HTML命名空间中创建元素。当您使用d3.create'rect'时，您不是在创建SVG矩形，而是在HTML规范中不存在的HTML矩形。元素出现在DOM中，但浏览器不知道如何呈现它。它具有SVG元素的名称，但不是SVG元素，因此它不会出现在屏幕上

每个HTML元素都有一个隐式xhtml:前缀，SVG中的每个SVG元素都隐式有一个SVG:前缀。通常您不需要担心它，因为名称空间通常非常明显，可以由库处理。然而，d3.create不能告诉您想要哪一个，因为它是一个分离的元素；因此它默认为HTML

因此，尽管svg:rect和xhtml:rect在DOM上的名称相同，但它们引用的规范不同，对浏览器来说唯一有意义的是svg:rect。

来自：

此方法采用HTML名称空间，因此在创建SVG或其他非HTML元素时必须显式指定名称空间[…]

d3.createsvg//相当于svg:svg d3.createsvg:svg//更明确 d3.createsvg:g//一个SVG元素 d3.createg//一个HTML G未知元素 因此，创建矩形的函数应该使用svg:rect。否则，它将创建一个HTML矩形而不是SVG矩形

默认情况下，d3.create方法在HTML命名空间中创建元素。当您使用d3.create'rect'时，您不是在创建SVG矩形，而是在HTML规范中不存在的HTML矩形。元素出现在DOM中，但浏览器不知道如何呈现它。它具有SVG元素的名称，但不是SVG元素，因此它不会出现在屏幕上

每个HTML元素都有一个隐式xhtml:前缀，SVG中的每个SVG元素都隐式有一个SVG:前缀。通常您不需要担心它，因为名称空间通常非常明显，可以由库处理。然而，d3.create不能告诉您想要哪一个，因为它是一个分离的元素；因此它默认为HTML

---

因此，尽管svg:rect和xhtml:rect在DOM上的名称相同，但它们引用的规范不同，对浏览器来说唯一有意义的是svg:rect。

它是通过onload事件启动的吗？不，不是。标记没有属性。它是用onload事件启动的吗？不是。标记没有属性。我刚刚尝试过这个-d3.createsvg:rect有效！非常感谢你！如果我弄错了，请纠正我的理解-d3.create always/默认情况下在窗口名称空间/对象中创建元素？但是在我之前的例子中，我没有指定“svg:rect”，那么为什么即使矩形没有出现在浏览器中，它仍然会出现在DOM的标记中？@xax我编辑了答案，详细说明了HTML rect和svg rect之间的区别。我很欣赏更全面的答案，现在完全理解了区别。谢谢。我刚刚试过这个-d3。createsvg:rect有效！非常感谢你！如果我弄错了，请纠正我的理解-d3.create always/默认情况下在窗口名称空间/对象中创建一个元素

---

? 但是在我之前的例子中，我没有指定“svg:rect”，那么为什么即使矩形没有出现在浏览器中，它仍然会出现在DOM的标记中？@xax我编辑了答案，详细说明了HTML rect和svg rect之间的区别。我很欣赏更全面的答案，现在完全理解了区别。非常感谢。