如何将 jQuery 对象转换为 d3 对象？

Question

我在将 jQuery 与 D3js 一起使用时遇到问题。

我有一个名为 "elem" 的 jQuery 元素，我想执行一些 D3js 功能。

此代码有效：

d3.select("body").append("svg").attr("width", 300).attr("height", 300).append("g").attr("transform", "translate(150,150)").selectAll("text").data(words).enter().append("text")......

此代码没有

elem.append("svg").attr("width", 300).attr("height", 300).append("g").attr("transform", "translate(150,150)").selectAll("text").data(words).enter().append("text")......

那么如何将jQuery对象转换成D3对象呢？

Answer 1

不能直接转换对象。您需要使用 d3js 重新 select 元素。 d3js select或者像这样工作

d3.select("#mydiv")

所以简单地从 jQuery 元素中提取 id 就像这样

d3.select("#" + elem.attr("id")).append("svg").attr("width", 300)... 

当然，如果您只使用 jQuery 到 select 元素，那么您应该改用 d3js selection。

编辑：我更喜欢上面 Ozan 的回答，使用它！

Answer 2

您可以在 jquery 对象上使用 .get() 方法或数组符号从 jQuery 对象获取 DOM 元素本身，然后 select它们与 d3 select 或者像任何 DOM 元素一样。

请注意，虽然两者都有效，jQuery faq mentions that array notation is faster.

d3.select($("#selection").get(0));
d3.select($("#selection")[0]); // equivalent to above but faster

编辑：感谢 Ken Fox 指出 jQuery 常见问题。