0

I would try my best to describe the challenge that I am facing. I would like to use D3 to make 2 things:

1. A List that contain Node name
2. A Forcelayout graph with Node and Link

They are on different divs. Can make it in 1 .js but preferable 2 seperate.

Desired interaction:

 When I click on a Node in the graph, the corresponding one in the
   list would be highlight

How can accomplish such objective?

Loredra L
  • 1,485
  • 2
  • 16
  • 32
  • 1
    Draw each view into a separate div, then add appropriate mouse events handlers that, when triggered, set a state (ie a variable or object) that describes what is being highlighted. Then re-render both views. The view rendering code should take the highlight state into account when deciding how to render the graphic, so that it renders appropriately highlighted. – meetamit Mar 18 '16 at 17:52
  • @meetamit : Thanks so much. And how can I associate an variable with the object? For example, in D3, when and click 1 node. then d3.this,variable=chosen? – Loredra L Mar 21 '16 at 09:08
  • Use `.on("click" function(d) { ... })` – meetamit Mar 21 '16 at 12:02
  • @meetamit ; You misunderstood me. I mean if I can do something like set a flag associate with a node. For example, the node that I just click will have a flag "isChosen" with value=1 now. So that when I render, node with isChosen=1 will be treat differently – Loredra L Mar 21 '16 at 13:26
  • Yes, that's one reasonable way to do it. The other is to set a "global" var (not literally a global var, just something within scope of rendering and clicking code), `chosen = d` and treat differently when `d == chosen`. It depends on how your rendering code is written. You didn't share any code, so there's no way to provide a concrete answer. – meetamit Mar 21 '16 at 13:32

0 Answers0