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上查看。该脚本生成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但没有显示任何内容

1 个答案: