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

Question

我有一个技术问题。我想知道是否可以使用 jQuery.

设置 d3 元素的样式

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

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

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

如何使用 jQuery 设置此元素的样式？例如通过单击添加红色边框？

显然我需要 class 或 <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 or .style

Answer 2

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

$('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 page. There is also a good answer 上的另一个问题上最近刚刚获得赏金，可以更详细地了解所涉及的技术问题。

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

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

Style a d3 element with jQuery and CSS

javascript

css

jquery

d3.js