javascript - 在现有的分离 SVG 元素上创建 d3 选择

Question

我在 JavaScript 中有一个组件，它将<svg>为其主机提供一个元素。我想使用 d3.js 填充 SVG 元素。

如果我让 d3.js 创建 SVG 元素并将其添加到<body>，那么事情会按预期工作：

var chart = d3.select('body').append('svg');

但是我已经有一个 SVG 元素。我希望我的代码更类似于：

var svg = document.createElement('svg'),
    chart = d3.select(svg);

后一种方法填充 SVG 元素（如 Chrome 开发人员工具的元素面板中所示），但无法正确呈现。

我做错了吗？

我不介意 d3 是否创建 SVG 元素，只要它不将其附加到 DOM 并且我可以访问它。

编辑我创建了一个jsFiddle 来重现我的问题。您可以在 1 和 2 之间切换APPROACH变量以查看替代方法。我在 Chrome 和 Firefox（Ubuntu 13.04 上的最新版本）中都看到了这个问题。

编辑 2我创建了一个屏幕截图，并排显示了工作和非工作版本：

您可以看到元素树大致相同。然而，在非工作版本（左侧）中，样式面板（在元素树的右侧）缺少一些用户代理规则。我不知道为什么这应该不同。我建议这是 Chrome 中的一个错误，但在 Firefox 中可以看到相同的行为。

score 4 · Accepted Answer

问题是您在 HTML 命名空间中创建了 SVG 元素，它被错误地解释了。如果你更换

var svg = document.createElement('svg');

和

var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');

它工作正常。D3 通过自动设置命名空间来为您解决这个问题。

1 回答 1