在现有的分离SVG元素上创建d3选择

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来重现我的问题.您可以APPROACH在1和2之间切换变量以查看替代方法.我在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 通过自动设置命名空间来为您处理这个问题。