使用 jQuery 和 CSS 为 d3 元素设置样式

Question

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

例如，来自 d3 站点 http://www.jasondavies.com/collatz-graph/ 的“Collat​​z 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

为什么不直接使用 d3 来设置元素的样式？

d3.select(".nome_class").on('click', function(){
    d3.select(this).attr("style", "border: 3px solid red;")
})

您也可以使用.classed 或.style

Answer 2

可以，但是当定位<svg> 元素时，您必须选择样式属性，例如stroke and fill。例如，在该站点中，如果您打开开发工具并粘贴/执行以下内容，您将看到更改

$('circle').css('stroke', 'green')
$('circle').css('fill', 'red')

编辑

根据讨论，您可以使用 jQuery 在 <g> 元素上附加事件处理程序，然后做任何您想做的事情

$('g').click(function(e) {
    console.log($(this).children().closest('text').text());
    // do whatever else  
});

Answer 3

缩短一个长答案：不要这样做！尝试在 SO 上搜索 [svg][jquery] namespace 以查找在尝试使用 jQuery 操作 svg 时可能遇到的各种问题。尽管有很多方法可以绕过它，但其中大多数都涉及大量的调整和在纯 JavaScript 中做一些事情，而不涉及 jQuery。

jQuery 设计用于处理 html，这导致处理其他命名空间（如 svg）时遇到困难。有一些关于 jQuery 的错误跟踪器的错误报告，但 jQuery 基金会已经关闭了所有这些错误报告，并且在撰写本文时在其Won't Fix 页面上列出了这些问题。还有一个good answer 来回答关于 SO 的另一个问题，该问题最近刚刚获得奖励，可以更详细地了解所涉及的技术问题。

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