D3.js 生成有效的 SVG 但不显示任何内容

Question

这是我的 D3.js 脚本：

var svg = d3.select('body').append('svg')
    .attr('width', 100)
    .attr('height', 100);

svg.append(function () {
    var g = d3.select(document.createElement('g'))
        .attr('width', 50)
        .attr('height', 50);

    g.append('circle').attr('r', 8).attr('cx', 10).attr('cy', 10);
    g.append('text').text("test").attr('x', 25).attr('y', 25);

    return g.node();
});

你可以在jsfiddle. The script produces valid SVG code上查看：

<svg width="100" height="100"><g width="50" height="50"><circle r="8" cx="10" cy="10"></circle><text x="25" y="25">test</text></g></svg>

您可以使用 DOM 检查器来验证这确实是使用上面的 JavaScript 生成的代码。问题是你什么都看不到。图像根本不会出现。但是如果你手动将生成的 SVG 代码复制到另一个 JSFiddle 实例中，你可以清楚地看到图像在那里并且有效。

我想问题出在 append 函数中，事实上我传递的是一个函数作为参数而不是元素名称。但是，根据文档，这是一项受支持的功能。这真的很奇怪，因为显然 DOM 已正确更改。

Answer 1

您需要使用 createElementNS 而不是 createElement，并提供正确的命名空间——否则您只会创建恰好具有 “正确”名称的元素，但未被浏览器识别为 SVG 元素。

var g = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'g'))

http://jsfiddle.net/gotgo29L/1/

D3.js 生成有效的 SVG 但不显示任何内容

D3.js produces valid SVG but shows nothing

javascript

d3.js