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设置此元素的样式？例如单击添加红色边框？

显然我需要<text ... >中的一个类或ID，并按以下步骤操作：

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

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

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

Answer 1

是的，您可以，但在定位<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 2

简短回答：不要这样做！尝试在SO上搜索[svg][jquery] namespace，以了解尝试使用jQuery操作svg时可能遇到的各种问题。虽然有各种各样的方法，但大多数都需要进行大量的调整，并且在纯JavaScript中进行操作而不涉及jQuery。

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

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

Answer 3

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

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

您也可以.classed或.style

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

3 个答案: