javascript - d3.create() 返回一个带.node() 的元素，但在浏览器中不显示

Question

<分区>

Answer 1

来自 d3.create documentation :

This method assumes the HTML namespace, so you must specify a namespace explicitly when creating SVG or other non-HTML elements [...]

    d3.create("svg") // equivalent to svg:svg  
    d3.create("svg:svg") // more explicitly  
    d3.create("svg:g") // an SVG G element  
    d3.create("g") // an HTML G (unknown) element  

因此，创建矩形的函数应该使用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。