javascript - How to update the existing nodes attributes of a d3js tree, based on an input value from a search box? -

i working d3js example: https://bl.ocks.org/mbostock/4339083

in case, difference whole code wrapped within function being called externally. consider variables defined within such function.

then, still externally, want update nodes attributes based on search box created following:

<div id="footer">     <label for="search">search: </label>     <input type="text" id="search" onkeyup="update(this.value)"> </div> 

the box seems operational. can type within , each time press key calls following function created texts/labels existing nodes.

    function update(query) {         var text = d3.select("svg")             .selectall('text')             .style("font-weight", function (d) {                 console.log(d.name)                 if (d.name.tolowercase().indexof(query.tolowercase()) != -1) { return "bold" } else { return "normal" }             });         } 

those texts should updated based on tag input of query box et bold. however, nothing changes. did call text elements in right manner? or maybe nothing gets updated because whole script initalized within function being called externally?

hope clear!

edit - following gerardo's first comment

thanks reply , highlight! changed name of function. in case still unresponsive, unfortunately.

as mentioned have function wraps everything, such as:

function updatedoc(json) {          ...then code goes here...        function updatename(query) {         var text = d3.select("svg")             .selectall('text')             .style("font-weight", function (d) {                 console.log(d.name)                 if (d.name.tolowercase().indexof(query.tolowercase()) != -1){              return "bold" } else { return "normal" }             });         }      } 

most causes trouble. hint how work? not want call again function updatedoc recompute bunch of things nothing. tried place updatename outside updatedoc not work well...

your function work. problem name: there function named update in code.

solution: change name. instance, updatename:

<input type="text" id="search" onkeyup="updatename(this.value)"> 

of course, don't forget change function's name in script well:

function updatename(query) {     //etc... 

here bl.ocks: https://bl.ocks.org/anonymous/a81b92e7aadc14de65008aab0397944d/dd734b2cfcc9c2254ff6a5b803b531bc9900b449

wiki