我在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开发者工具的element面板中所示),但无法正确呈现。

我会错误地解决吗?

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

编辑我创建了jsFiddle that reproduces my problem。您可以在1和2之间切换APPROACH变量以查看替代方法。我在Chrome和Firefox(Ubuntu 13.04的最新版本)中都看到了这个问题。

编辑2 我创建了一个屏幕快照,并排显示了工作版本和非工作版本:

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

您可以看到元素树基本相同。但是,在非工作版本(左侧)的“样式”面板(位于元素树右侧)缺少某些用户代理规则。我不知道为什么这应该有所不同。我建议这是Chrome中的错误,但在Firefox中可见相同的行为。

最佳答案

问题是您在HTML命名空间中创建了SVG元素,在该位置错误地解释了该元素。如果您更换

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


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

它工作正常。 D3通过自动设置 namespace 来为您解决这一问题。

07-24 09:38
查看更多