使用jQuery和CSS设计d3元素

Question

我有某种技术问题。我想知道是否有可能使用jQuery设计一个d3元素。

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

在这种情况下，数字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元素做其他事情）。但是当我尝试style d3元素时，我得不到任何结果。

我会非常感谢任何提示或建议。

Answer 1

要削减长的答案短：不要这样做！尝试在SO上搜索[svg][jquery] namespace，以了解尝试使用jQuery来操纵svg时可能遇到的各种问题。尽管围绕它的方法有很多，但其中大部分都涉及到很多调整，并在纯JavaScript中执行，而不涉及jQuery。

jQuery被设计为处理html，导致处理其他名称空间像svg时遇到困难。有一些关于jQuery bug跟踪器的bug报告，但jQuery基金会已经关闭了所有这些bug，并且在撰写本文时将这些问题列在其Won't Fix页面上。还有一个关于SO的另一个问题good answer，最近刚刚获得了一项奖励，对所涉及的技术问题有了更详细的了解。

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

Answer 2

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

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

你也可以做.classed或.style

Answer 3

是的，你可以，但是目标<svg>元素时，你必须选择样式属性，如stroke and fill。例如，在该网站，如果你打开你的开发工具和粘贴/执行下面，你会看到的变化

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

编辑

每讨论，你可以在你<g>元素附加事件处理程序使用jQuery做任何你希望

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