求助：使用d3.create()创建的rect无法在SVG中显示

嘿，我来帮你搞定这个困惑！你遇到的问题其实是D3新手很容易踩的一个坑——d3.create()默认创建的是HTML元素，而非SVG元素，哪怕你把它追加到SVG标签里，浏览器也不会把它当成SVG图形来渲染，所以才会出现DOM里有元素但页面看不到的情况。

咱们来拆解下问题：

• 当你用d3.create('rect')时，D3会创建一个HTML的<rect>元素（属于HTML命名空间），但SVG的图形元素必须属于SVG命名空间（http://www.w3.org/2000/svg）才能被正确渲染。
• 虽然你最后用svg.append(() => romanticCircle.node())把元素加到了SVG里，但元素本身的命名空间不对，浏览器只会把它当成普通的HTML节点，不会绘制图形。

给你两种简单的解决办法：

方法一：给d3.create指定SVG命名空间 #

你只需要在创建元素时加上svg:前缀，告诉D3要创建SVG命名空间下的rect元素：

const svg = d3.select('svg').attr('width', 100).attr('height', 100)
// 指定SVG命名空间创建rect
const romanticRect = d3.create('svg:rect');
romanticRect
 .attr('x', 25) // 显式设置x坐标，让矩形居中
 .attr('y', 25) // 显式设置y坐标
 .attr('width', 50)
 .attr('height', 50)
 .attr('fill', 'red');
svg.append(() => romanticRect.node())

方法二：直接在SVG上创建元素（更常用） #

其实如果你的元素本来就要追加到SVG里，完全可以不用d3.create()，直接在SVG选择集上调用append()，这样D3会自动使用SVG命名空间：

const svg = d3.select('svg').attr('width', 100).attr('height', 100)
svg.append('rect')
 .attr('x', 25)
 .attr('y', 25)
 .attr('width', 50)
 .attr('height', 50)
 .attr('fill', 'red');

另外补充一句：虽然rect的x、y默认值是0，但显式设置会让代码更清晰，也能避免一些意外的布局问题~

内容的提问来源于stack exchange，提问作者LiHao