6

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

4

1 回答 1

4

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

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

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

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

于 2013-07-06T18:32:43.797 回答