2016-06-29 5 views
0

저는 d3.js를 처음 사용하고 있으며이 링크에서 계층 적 가장자리 번들을 수정하려고합니다 : https://bl.ocks.org/mbostock/7607999.d3.js 계층 적 가장자리 클릭시 번들링 노드 색상 변경

enter image description here

나는 호버에 표시되는 링크를 제거하고 대신 클릭에 넣어 가지고. 내가 클릭 한 노드 (동일하게 강조)과 동일하게하고 싶습니다. 노드의 호버 이벤트를 제거했습니다. 여기는 내가 지금까지 가지고있는 것의 바이올린이다. https://fiddle.jshell.net/vdmn2oj4/.

어떻게하면됩니까?

호버에있을 때 CSS 스타일에서 '마우스 오버'속성을 사용할 수 있지만 클릭 할 때 아무 것도 없습니다 (링크 및 텍스트 필드에만 초점). 내가 데이터를 변경하고이를 만들기 위해 노력했다

는 (그래서 CSS에 초점을 사용할 수 있습니다) 대신 링크 :

<a href='#' onclick='return true;'>data</a> 

하지만 (작동 당신이 그렇게 할 수 있는지 알려하지 않았다 물론 어떻게 든). 그래서 같은 링크에 대한 속성을 사용하여 :

.attr({"xlink:href": "#"}) 

작동하지 않습니다 중 하나를 나는 CSS를 초점에 자사의 스타일을 변경할 수 없습니다 (또는 얼마나 잘 모르겠지만, 내가 할 수 있다면 그건 내 문제를 해결할 수 있기 때문에).

나는 또한 노드를 조작하려고 시도했지만, 지금까지는 모든 노드, 소스 및 대상을 변경할 수 있었지만 클릭 한 노드는 변경할 수 없었습니다.

또한 노드에 "parent"속성이 있습니다. 원하는 노드 일 수도 있지만 그 중 하나를 사용하는 방법을 찾지 못했습니다.

나는 이미 많은 시간을 보냈으므로 어떤 해결책이나 환영도받을 수 있습니다.

답변

1

function mouseclick 안에이 추가 : 궤도에의 https://fiddle.jshell.net/vdmn2oj4/3/

+1

:

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 

가 여기에 업데이트 된 바이올린입니다! 예를 들어, .node - {fill : # 00BFFF;} (세 번째 색상은 ciddle)입니다. "node - sourc, truee"를 "node-click, true"로 변경하면 다른 노드를 클릭 할 때 색상이 제거되지 않습니다. 어떤 충고? – MorganFR

+0

방금 ​​바이올린을 업데이트했습니다. –

+0

고맙습니다. 편집 된 기능이 이제 작동합니다. – MorganFR