[英]d3.js Hierarchical Edge Bundling node color change on click
I am new to d3.js, and I am trying to modify the Hierarchical Edge Bundling from this link: https://bl.ocks.org/mbostock/7607999 . 我是d3.js的新手,并且正在尝试通过以下链接修改Hierarchical Edge Bundling: https ://bl.ocks.org/mbostock/7607999。
I have removed the links being displayed on hover , and put the on click instead. 我已经删除了悬停显示的链接,而是点击了 。 I would like to do the same with the node that I click on (highlight it) .
我想对单击的节点执行相同的操作(突出显示) 。 I have removed the hover event for the node.
我已删除该节点的悬停事件。 here is a fiddle of what I have so far https://fiddle.jshell.net/vdmn2oj4/ .
这是我到目前为止https://fiddle.jshell.net/vdmn2oj4/的小提琴。
How can I do this? 我怎样才能做到这一点?
When it was on hover, we could just use the "hover" attribute in the css style, but there is no such thing with a click (only focus for links and textfields). 当鼠标悬停时,我们可以仅使用css样式的“ hover”属性,但是单击时就没有这种情况(仅将焦点放在链接和文本字段上)。
I have tried to change the data and make them links instead (so I could use focus in css): 我试图更改数据并改为使其链接(以便可以在CSS中使用focus):
<a href='#' onclick='return true;'>data</a>
but of course that didn't work (let me know if you can do that somehow though). 但这当然是行不通的(不过请告诉我您是否可以这样做)。 and using an attribute for links like so:
并为链接使用属性,如下所示:
.attr({"xlink:href": "#"})
doesn't work either because I cannot change its style on focus with css (or I don't know how, but that might solve my problem if I could). 也不起作用,因为我无法通过css改变其样式(或者我不知道如何,但是如果可以的话,这可能会解决我的问题)。
I have also tried manipulating the nodes, but so far, I have only been able to change all the nodes, the sources and the targets, but not the one I click on. 我也尝试过操纵节点,但是到目前为止,我只能更改所有节点,源和目标,但不能更改单击的节点。
I also know that there is a " parent " attribute to nodes, which might be the ones I want, but I haven't found out how to use that either. 我也知道节点有一个“ parent ”属性,这可能是我想要的属性,但是我也没有找到如何使用它的属性。
Any solution, even partial would be welcome, as I have spend a lot of time on this already. 任何解决方案,甚至是部分解决方案都将受到欢迎,因为我已经在此方面花费了大量时间。
Add this inside your function mouseclick
: 将此添加到您的
function mouseclick
:
d3.select(".node--clicked")
.classed("node--clicked", false);//removes the class of previously clicked nodes
var clicked = d3.select(this);//select the clicked element
clicked.classed("node--clicked", true);//set the class
Here is your updated fiddle: https://fiddle.jshell.net/vdmn2oj4/3/ 这是您更新的小提琴: https : //fiddle.jshell.net/vdmn2oj4/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.