//Redsift
//HighlightIndex
//Enable the highlighting of a particular index or an array of index
//Example below shows different ways of implementing highlight
let chart = d3_rs_lines.html()
.highlightIndex([{ l: 'single', v: [ 0.3 ] }, [ 2.0, 3.5 ]]); //highlight '0.3' with custom legend and highlighting index 2.0 to 3.5 with default legend
d3.select('#chart')
.datum([1, 2, 3, 10, 20])
.call(chart);
d3.select('#highlightInfo')
.html('<p>The above graph highlight index <code>0.3</code> with custom legend <code>"single"</code> and highlights index <code>2.0</code> to <code>3.5</code> with default legend.<br> NOTE: When adding different highlighting parts to the same graph it must be enclosed in square brackets. <code>.highlightIndex([{ l: "single", v: [ 0.3 ] }, [ 2.0, 3.5 ]]);</code></p>');
function singleDefault(){
let chart = d3_rs_lines.html()
.highlightIndex([ 0.3 ]); //highlight '0.3'
d3.select('#chart')
.datum([1, 2, 3, 10, 20])
.call(chart);
d3.select('#highlightInfo').html('<p>The above graph highlight index <code>0.3</code> with default legend <code>.highlightIndex([ 0.3 ]);</code></p>' );
}
function singleCustom(){
let chart = d3_rs_lines.html()
.highlightIndex({ l: 'single', v: [ 0.3 ] }); //highlight index 0.3 and add a legend to the index.
d3.select('#chart')
.datum([1, 2, 3, 10, 20])
.call(chart);
d3.select('#highlightInfo')
.html('<p>The above graph highlight index <code>0.3</code> with custom legend <code>"single"</code> <code>.highlightIndex({ l: "single", v: [ 0.3 ] });</code></p>');
}
function arrayDefault(){
let chart = d3_rs_lines.html()
.highlightIndex([[ 2.0, 3.5 ]]); //highlight index 2.0 to 3.5.
d3.select('#chart')
.datum([1, 2, 3, 10, 20])
.call(chart);
d3.select('#highlightInfo')
.html('<p>The above graph highlight index <code>2.0</code> to <code>3.5</code> with default legend.<br> NOTE: For an array to be highlighted double square brackets are needed.<code>.highlightIndex([[ 2.0, 3.5 ]]);</code></p>');
}
function arrayCustom(){
let chart = d3_rs_lines.html()
.highlightIndex({ l: 'Highlighted array', v :[ 2.0, 3.5 ]}); //highlight index 2.0 to 3.5 and add a legend highlighting the index.
d3.select('#chart')
.datum([1, 2, 3, 10, 20])
.call(chart);
d3.select('#highlightInfo')
.html('<p>The above graph highlight index <code>2.0</code> to <code>3.5</code> with custom legend.<br> NOTE: Compared to default legend, using custom legend, double sqaure brackets are not needed.<code>.highlightIndex({ l: "Highlighted array", v :[ 2.0, 3.5 ]});</code></p>');
}
function seperateDefault(){
let chart = d3_rs_lines.html()
.highlightIndex([ 2.0, 3.5 ]); //highlight index 2.0 and 3.5.
d3.select('#chart')
.datum([1, 2, 3, 10, 20])
.call(chart);
d3.select('#highlightInfo')
.html('<p>The above graph highlight index <code>2.0</code> and <code>3.5</code> with default legend <code>.highlightIndex([ 2.0, 3.5 ])</code></p>');
}
function seperateCustom(){
let chart = d3_rs_lines.html()
.highlightIndex([ { l: 'First Index', v: [2.0]}, { l: 'Second Index', v: [ 3.5 ] } ]); //highlight index taking index 2.0 and add a legend to it and highlight index 3.5 and add a legend to it.
d3.select('#chart')
.datum([1, 2, 3, 10, 20])
.call(chart);
d3.select('#highlightInfo').html('<p>The above graph highlight index <code>2.0</code> and <code>3.5</code> with custom legend <code>.highlightIndex([ { l: "First Index", v: [2.0]}, { l: "Second Index", v: [ 3.5 ] } ])</code></p>');
}
function default_custom(){
let chart = d3_rs_lines.html()
.highlightIndex([{ l: 'single', v: [ 0.3 ] }, [ 2.0, 3.5 ]]); //highlight '0.3' with custom legend and highlighting index 2.0 to 3.5 with default legend
d3.select('#chart')
.datum([1, 2, 3, 10, 20])
.call(chart);
d3.select('#highlightInfo')
.html('<p>The above graph highlight index <code>0.3</code> with custom legend <code>"single"</code> and highlights index <code>2.0</code> to <code>3.5</code> with default legend. <br>NOTE: When adding different highlighting parts to the same graph it must be enclosed in square brackets. <code>.highlightIndex([{ l: "single", v: [ 0.3 ] }, [ 2.0, 3.5 ]]);</code></p>');
}
// Generic function to toggle selected state of a button
d3.selectAll('button')
.on('click', function() {
let selected = this;
d3.selectAll('button')
.classed('rs-btn--selected', function() {
return (selected === this);
});
});
View Compiled