我在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 我创建了一个屏幕快照,并排显示了工作版本和非工作版本:
您可以看到元素树基本相同。但是,在非工作版本(左侧)的“样式”面板(位于元素树右侧)缺少某些用户代理规则。我不知道为什么这应该有所不同。我建议这是Chrome中的错误,但在Firefox中可见相同的行为。
最佳答案
问题是您在HTML命名空间中创建了SVG元素,在该位置错误地解释了该元素。如果您更换
var svg = document.createElement('svg');
与
var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
它工作正常。 D3通过自动设置 namespace 来为您解决这一问题。