使用 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 站点的Collatz Graph"示例http://www.jasondavies.com/collatz-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?
显然我需要 <text ... > 中的类或 id 并按以下步骤操作:
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 的错误跟踪器的错误报告，但 jQuery 基金会已经关闭了所有这些报告，并且在撰写本文时在其 不会修复页面.还有一个关于 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屋！
