0

I find this pretty cool d3 network diagram on a website (a json file is at the bottom of this page). Then I'm thinking about adding some kind of select box as filter to select data so specific shape of the nodes will be shown only. So I wrote a select box in html like this:

<select>
    <option value="All">All</option> 
    <option value="circle">circle</option> 
    <option value="square">square</option> 
</select>

What I want is when I choose All, the whole network will be presented, when I choose circle, only the circle nodes will be presented.

I'm not a javascript or html expert so I'm not sure how to let my selection in html script effect a json data. Also I'm thinking would that be easier if I just make the non-selected shape transparent? The data format in d3 network is quite tricky so I don't know adding a filter like this would have an effect on the links part of json data?

Much appreciate for any advice

Thanks in advance

Lambo
  • 857
  • 3
  • 14
  • 39

1 Answers1

1

Actually you don't need to affect the json data itself. The functionality you described is already implemented in the tree by keypresses (try 'C' or 'S' buttons) by means of function keydown().

Thus, try to dispatch keypress event from select's onchange event attribute to get handled (this can be tricky):

<select onchange='dispatchEventInside(this.options[this.selectedIndex].value)'>
    <option value="A">All</option> 
    <option value="C">Circles</option> 
    <option value="S">Squares</option> 
</select>

, and vice versa - change select's value when key is pressed (look here, but don't forget this will trigger onchange, so maybe remove this attribute temporarily).

Community
  • 1
  • 1
AntalOvc
  • 85
  • 11