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

Posted 2023-02-22

【中文标题】如何将 jQuery 对象转换为 d3 对象？

【英文标题】：How to convert a jQuery object into a d3 object?

【发布时间】：2015-03-18 16:00:54

【问题描述】：

我在使用 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 对象呢？

【问题讨论】：

我真的不明白为什么这个问题被如此强烈地否决。这似乎是一个合理的问题。

您无法从 jquery 转换为 D3。而是直接使用 D3 选择元素。

显然有可能……

【参考方案1】：

您可以使用 .get() 方法或对 jquery 对象的数组表示法从 jQuery 对象中获取 DOM 元素本身，然后像使用任何 DOM 元素一样使用 d3 选择器选择它们。

请注意，虽然两者都有效，但 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 常见问题。

【讨论】：

我是 d3js 的新手，所以我花了一段时间才发现我的数据在 '.bar' 中下降了，就像这样：var data = d3.select(chart.get(0)).selectAll('.bar').data(); ***.com/a/16057614/470749

只是一个简短的说明： 按照docs，这样做会更快d3.select($("#selection")[0]);

【参考方案2】：

您不能直接转换对象。您需要使用d3js 重新选择元素。 d3js 选择器是这样工作的

d3.select("#mydiv")

所以只需像这样从jQuery 元素中提取id

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

当然，如果您只使用jQuery 选择元素，那么您应该改用d3js 选择。

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