Created
April 20, 2017 05:05
-
-
Save RasmusFonseca/6f2d9cef6df6011d4bb0615c49398ec9 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Creates a tree and track selector for `flareplot` within `container`. | |
* | |
* If there are more than one tree in the graph a div will be added containing | |
* radio buttons to switch between them. If the graph has more than one track | |
* they'll be added in a div after. If there is only one tree and one track the | |
* container will be left untouched. The resulting layout will look as follows: | |
* <code> | |
* <div id="container"> | |
* <div class="treeselector"> | |
* <input type="radio" name="tree-radios" id="tree-radio-0" checked /> | |
* <label for="tree-radio-0">Helical</label> | |
* <input type="radio" name="tree-radios" id="tree-radio-1" /> | |
* <label for="tree-radio-1">Binding pocket</label> | |
* </div> | |
* <div class="trackselector"> | |
* <input type="radio" name="track-radios" id="track-radio-0" /> | |
* <label for="track-radio-0">Helix colors</label> | |
* <input type="radio" name="track-radios" id="track-radio-1" /> | |
* <label for="track-radio-1">Node centrality</label> | |
* </div> | |
* </div> | |
* </code> | |
* No styling will be applied, but the `flareplot-selectors.css` file can be | |
* used as is or as a template. | |
* | |
* @param flareplot A flareplot object created by calling `createFlareplot`. | |
* @param container A div or DOM container assumed to be empty. | |
* @returns {Function} | |
*/ | |
function createSelectors(flareplot, container){ | |
return (function() { | |
function initialize() { | |
var treeNames = flareplot.getTreeNames(); | |
if(treeNames.length > 1){ | |
var div = d3.select(container) | |
.append("div") | |
.classed("treeselector"); | |
for (var i=0; i<treeNames.length; i++){ | |
div.append("input") | |
.attr("type","radio") | |
.attr("name","tree-radios") | |
.attr("id","tree-radio-"+i); | |
div.append("label") | |
.attr("type","radio") | |
.attr("for","tree-radio-"+i) | |
.text(treeNames[i]); | |
} | |
} | |
var trackNames = flareplot.getTrackNames(); | |
if(trackNames.length > 1){ | |
var div = d3.select(container) | |
.append("div") | |
.classed("trackselector"); | |
for (var i=0; i<trackNames.length; i++){ | |
div.append("input") | |
.attr("type","radio") | |
.attr("name","track-radios") | |
.attr("id","track-radio-"+i); | |
div.append("label") | |
.attr("type","radio") | |
.attr("for","track-radio-"+i) | |
.text(trackNames[i]); | |
} | |
} | |
} | |
initialize(); | |
return {}; | |
}) (); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Creates a tree and track selector for `flareplot` within `container`. | |
* | |
* If there are more than one tree in the graph a div will be added containing | |
* radio buttons to switch between them. If the graph has more than one track | |
* they'll be added in a div after. If there is only one tree and one track the | |
* container will be left untouched. The resulting layout will look as follows: | |
* <code> | |
* <div id="container"> | |
* <div class="treeselector"> | |
* <input type="radio" name="tree-radios" id="tree-radio-0" checked /> | |
* <label for="tree-radio-0">Helical</label> | |
* <input type="radio" name="tree-radios" id="tree-radio-1" /> | |
* <label for="tree-radio-1">Binding pocket</label> | |
* </div> | |
* <div class="trackselector"> | |
* <input type="radio" name="track-radios" id="track-radio-0" /> | |
* <label for="track-radio-0">Helix colors</label> | |
* <input type="radio" name="track-radios" id="track-radio-1" /> | |
* <label for="track-radio-1">Node centrality</label> | |
* </div> | |
* </div> | |
* </code> | |
* No styling will be applied, but the `flareplot-selectors.css` file can be | |
* used as is or as a template. | |
* | |
* @param flareplot A flareplot object created by calling `createFlareplot`. | |
* @param container A div or DOM container assumed to be empty. | |
* @returns {Function} | |
*/ | |
function createSelectors(flareplot, container){ | |
function initialize() { | |
var treeNames = flareplot.getTreeNames(); | |
if(treeNames.length > 1){ | |
var div = d3.select(container) | |
.append("div") | |
.classed("treeselector"); | |
for (var i=0; i<treeNames.length; i++){ | |
div.append("input") | |
.attr("type","radio") | |
.attr("name","tree-radios") | |
.attr("id","tree-radio-"+i); | |
div.append("label") | |
.attr("type","radio") | |
.attr("for","tree-radio-"+i) | |
.text(treeNames[i]); | |
} | |
} | |
var trackNames = flareplot.getTrackNames(); | |
if(trackNames.length > 1){ | |
var div = d3.select(container) | |
.append("div") | |
.classed("trackselector"); | |
for (var i=0; i<trackNames.length; i++){ | |
div.append("input") | |
.attr("type","radio") | |
.attr("name","track-radios") | |
.attr("id","track-radio-"+i); | |
div.append("label") | |
.attr("type","radio") | |
.attr("for","track-radio-"+i) | |
.text(trackNames[i]); | |
} | |
} | |
} | |
initialize(); | |
return {}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I think you can use both.. One of the main difference is that you get a new function initialize each time you create selector in the first version. In the second version, you only have 'one' function initialize that is shared by every call.
As you only use passed arguments, this should be fine