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 that reproduces my problem。您可以在1和2之间切换APPROACH变量以查看其他方法。我在Chrome和Firefox中都看到了这个问题（Ubuntu 13.04上的最新版本。）

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

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

Answer 1

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

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

与

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

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