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

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

例如，来自d3网站http://www.jasondavies.com/collat​​z-graph/的“Collat​​z Graph”示例正在生成带有小标签的圆形节点。

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

32 

我怎么能用jQuery设计这个元素？ 例如，通过点击添加红色边框？

显然我需要中的类或id，并按如下方式进行：

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

在我的代码中，两个d3都在工作（我可以看到一个图形）并且jQuery正在工作（我可以用例如样式或用常规HTML元素做其他事情）。 但是当我尝试样式d3元素时，我没有得到任何结果。

我将非常感谢任何暗示或建议。

Answer 1

简短的回答：不要这样做！ 尝试在SO上搜索[svg] [jquery]命名空间 ，以解决在尝试使用jQuery操作svg时可能遇到的各种问题。 虽然有各种各样的方法，但大多数都涉及大量的调整和纯JavaScript中的东西，没有涉及jQuery。

jQuery旨在处理html，这导致难以处理像svg这样的其他命名空间。 关于jQuery的bug跟踪器有一些错误报告，但是jQuery基金会已经关闭了所有这些错误，并且在撰写本文时，将在Will Not Fix页面上列出这些问题。 关于SO的另一个问题也有一个很好的答案 ，这个问题最近刚被授予奖励，可以更详细地了解所涉及的技术问题。

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

Answer 2

是的，您可以，但是在定位元素时，您必须选择样式属性，例如stroke和fill 。 例如，在该网站中，如果您打开开发工具并粘贴/执行以下操作，您将看到更改

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

编辑

根据讨论，您可以使用jQuery在元素上附加事件处理程序，并执行您希望的任何其他操作

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

Answer 3

你为什么不用d3来设计元素？

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

你也可以做.classed或.style