我在 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 中可以看到相同的行为。