javascript - 使用 jQuery 和 CSS 设计一个 d3 元素

Question

我有一个技术问题。我想知道是否可以使用 jQuery 设置 d3 元素的样式。

例如来自 d3 站点的“Collat​​z Graph”示例 http://www.jasondavies.com/collatz-graph/正在产生一个圆圈 - 就像带有小标签的节点。

在这种情况下，数字 1、2、3 等等。这个数字只不过是一段代码，例如

 <text dy=".31em" text-anchor="start" transform="rotate(90)translate(8)">32</text>

我如何使用 jQuery 设计这个元素的样式？例如通过单击添加红色边框？

显然我需要在 <text ... > 中有一个类或 ID并进行如下操作:

 $(".nome_class").click(function() {
    $(this).css( "border", "3px solid red" );
 }); 

在我的代码中，d3 正在运行(我可以看到图表)并且 jQuery 正在运行(例如，我可以设置样式或使用常规 HTML 元素执行其他操作)。但是当我尝试样式 d3 元素时，我没有得到任何结果。

如果有任何提示或建议，我将不胜感激。

Answer 1

长话短说:不要这样做!尝试搜索 [svg][jquery] namespace在 SO 上尝试使用 jQuery 操作 svg 时可能遇到的各种问题。尽管有很多解决方法，但其中大部分都涉及大量调整，并在不涉及 jQuery 的情况下使用纯 JavaScript 执行操作。

jQuery 旨在处理 html，这导致难以处理其他命名空间，如 svg。 jQuery 的错误跟踪器上有一些错误报告，但 jQuery 基金会已关闭所有这些错误报告，并且在撰写本文时在其 Won't Fix 中列出了这些问题。页。还有一个good answer SO 上的另一个问题，最近刚刚获得赏金，可以更详细地了解所涉及的技术问题。

我自己结合了 jQuery 和 D3，但根据它们的设计目的将它们的用途分开:jQuery 用于 HTML 操作，D3 用于处理 svg。