Tuesday 14 March 2017

How to highlight certain text on click in d3 tree diagram?

I am trying to implement a button that, when clicked, will highlight/select a text string within this d3 module: http://bl.ocks.org/d3noob/8375092

I have a bunch of data that is being passed through the tree diagram using the below snippet:

var treeData = [}];

I then have a button that should function to highlight a certain element of text on the tree diagram based on the user:

<button onClick="doSearch('')"></button>

I am currently using an adapted version of code I found here which can be seen here:

function doSearch(text) {
if (window.find && window.getSelection) {
    document.designMode = "on";
    var sel = window.getSelection();
    sel.collapse(document.body, 0);

    while (window.find(text)) {
        document.execCommand("foreColor", false, "red");
        sel.collapseToEnd();
    }
    document.designMode = "off";
} else if (document.body.createTextRange) {
    var textRange = document.body.createTextRange();
    while (textRange.findText(text)) {
        textRange.execCommand("BackColor", false, "blue");
        textRange.collapse(false);
    }
}

}

Right now, when I click the button, instead of highlighting the text on tree diagram, the text that should be highlighted disappears from view.

I am hoping someone can point me in the right direction as to how I should do this; open to either manipulating this code or taking on a different approach. Thank you.



via derekwb91

No comments:

Post a Comment