如何将 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对象？

- Niko Lang

---

我真的不明白为什么这个问题被如此严重地贬低。它看起来是一个合理的问题。 - roryok

你不能将jQuery转换为D3。请直接使用D3选择元素。 - Lars Kotthoff

显然是可能的... - Niko Lang

Answer 1

您可以使用 jQuery 对象的 .get() 方法或数组符号来获取 DOM 元素，并像选择任何 DOM 元素一样使用 d3 选择器选择它们。

请注意，虽然两种方法都可以工作，但是jQuery FAQ指出数组符号更快。

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

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

- Ozan

---

我对d3js还很陌生，所以我花了一些时间才弄清楚我的数据在'.bar'里，像这样：var data = d3.select(chart.get(0)).selectAll('.bar').data(); https://dev59.com/NmQo5IYBdhLWcg3wbe_r#16057614 - Ryan

只是一个快速的提示：<br/> 根据文档，使用d3.select($("#selection")[0]);会更快。 - Fox

Answer 2

您不能直接转换对象。您需要使用 d3js 重新选择元素。 d3js 选择器的工作方式如下所示。

d3.select("#mydiv")

所以只需从jQuery元素中提取id，如下所示。

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

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

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

- roryok