Skip to content

Instantly share code, notes, and snippets.

@RasmusFonseca
Created April 20, 2017 05:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RasmusFonseca/6f2d9cef6df6011d4bb0615c49398ec9 to your computer and use it in GitHub Desktop.
Save RasmusFonseca/6f2d9cef6df6011d4bb0615c49398ec9 to your computer and use it in GitHub Desktop.
/**
* 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 {};
}) ();
}
/**
* 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 {};
}
@chabb
Copy link

chabb commented Apr 21, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment