使用jQuery和CSS样式化一个d3元素 [英] Style a d3 element with jQuery and CSS

问题描述

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

I have somehow a technical question. I would like to know if there is a possibility to style a d3 element with jQuery.

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

For instance a "Collatz Graph" example from the d3 site http://www.jasondavies.com/collatz-graph/ is producing a circle - like nodes with small labels.

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

In that case the numbers 1, 2, 3 and so on. The number is nothing more than a piece of code e.g.

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

如何使用jQuery为这个元素设计样式？例如通过点击它添加一个红色边框？

How could I style this element with jQuery? e.g. adding a red border by clicking it?

显然，我需要一个类或id在< text ...> 并执行如下操作：

Obviously I would need a class or id in the <text ... > and proceed as follows:

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

在我的代码中，d3都工作（我可以看到一个图形）和jQuery是工作可以例如用普通HTML元素来样式或做其他事情）。但是当我尝试风格d3元素，我得到没有结果。

In my code, both d3 is working (I can see a graph) and jQuery is working (I can for instance style or do something else with the regular HTML elements). BUT when I try style d3 element I get no result.

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

I will be very grateful for any hint or advice.

推荐答案

剪短的答案：不要这样做！尝试在SO上搜索 [svg] [jquery]命名空间的问题，你可能会遇到，当试图使用jQuery来操纵svg。虽然有很多方法，但是大多数都涉及到大量的调整和做的东西在纯JavaScript中没有涉及到jQuery。

To cut a long answer short: Don't do it! Try searching for [svg][jquery] namespace on SO for a variety of problems you might run into when trying to use jQuery to manipulate svg. Although there are ways around it, most of them involve a lot of tweaking and doing stuff in pure JavaScript with no jQuery involved.

jQuery是设计来处理html，处理其他命名空间（如svg）的困难。 jQuery的bug跟踪器有一些错误报告，但jQuery基金会已经关闭了所有的bug，并在写入时列出这些问题在它的 无法修复 页面。还有一个好的答案对SO的另一个问题，它刚刚被授予赏金，更详细地了解技术问题涉及。

jQuery was designed to handle html which results in difficulties dealing with other namespaces like svg. There are some bug reports on jQuery's bug tracker but the jQuery foundation has closed all of them and at the time of writing lists these issues on its Won't Fix page. There is also a good answer to another question on SO which has just recently been awarded a bounty giving a more detailed insight into the technical problems involved.

我有自己结合jQuery和D3，但是基于它们的目的分开他们的使用：jQuery的HTML操作和D3处理svgs 。

I have myself combined both jQuery and D3 but separated their use based on the purpose they were designed for: jQuery for HTML manipulation and D3 for dealing with svgs.

这篇关于使用jQuery和CSS样式化一个d3元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！