search/query capability in d3.js?

[vrnova]

Dear d3.js group:

I am using d3.js to visualize data as tree structure. I have generated JSON file for d3.js tree layout. Does d3.js provide capability to search in tree layout? Is d3.selection the correct point to start? Is there an example?

Thanks,
Yanling

[Mike Bostock]

> Does d3.js provide capability to search in tree layout?

You mean, like a degree-of-interest tree?

http://prefuse.org/gallery/treeview/
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.10.6554&rep=rep1&type=pdf

There's no built-in functionality to do it, but it's certainly
possible. However, the search would be implemented in JavaScript by
iterating over the tree structure, not using selections.

Mike

[vrnova]

Yes, I need to search node data to match user inputs. Is there an example showing iterating over the d3.js tree structure using javascript? I never used prefuse before and the prefuse example seems written in java instead of javascript...

Thanks,

[Mike Bostock]

> Is there an example showing iterating over the d3.js tree structure
> using javascript?

I expect so but I don't recall one off the top of my head. I did
implement search for the Protovis treemap example, and it would be a
fairly small change to adapt it for D3:

http://mbostock.github.com/protovis/ex/treemap.html

Mike

[asla...@bu.edu]

Hello Mr Bostock,

I have been working on the search functionality in a d3 tree layout as well, but I have not been able to implement it successfully/ adapt the protovis example for d3. I'd highly appreciate your further help.

Thanks! 

[RedDaisy675]

Yeah, me too. I am looking for a search functionality in the tree layout...

[Vikram Mirla]

You can use :contains to get elements based on their content.

example:
A  node:

<div style="left: 4.08437px; top: 410.562px; width: 20.392px; height: 14.6446px; background: none repeat scroll 0% 0% rgb(49, 130, 189);" class="node">
Japan

</div>

Code to highlight div, based on searched text.

$( "div:contains('Japan')" ).css( "text-decoration", "underline" );
$('div:contains("Japan")').css('background-color', 'red');

[Patrick Brockmann]

I have coded a solution with a search widget based on a select2. You get found nodes with their paths expanded styled in red. https://gist.github.com/PBrockmann/0f22818096428b12ea23 Hope that will help Patrick