@ -3,21 +3,61 @@
< link href = "../src/nv.d3.css" rel = "stylesheet" type = "text/css" >
< style >
/*
* {
margin: 0;
padding: 0;
border: 0;
}
*/
text {
font: 10px sans-serif;
body {
font-family : sans-serif;
}
#chart1 {
width: 600px;
height: 60px;
svg {
top: 10px;
left: 10px;
position: absolute;
}
svg > g > path {
pointer-events: none;
}
.nv-horizonBackground {
fill: none;
stroke: none;
pointer-events: all;
}
#horizon-controls {
position: absolute;
width: 940px;
padding: 10px;
z-index: 1;
}
#horizon-bands {
float: right;
}
< / style >
< body >
< h2 > Horizon:< / h2 >
< div > < svg id = "chart1" > < / svg > < / div >
< div id = "wrap" >
< div id = "horizon-controls" >
< input name = "mode" type = "radio" value = "mirror" id = "horizon-mode-mirror" checked > < label for = "horizon-mode-mirror" > Mirror< / label >
< input name = "mode" type = "radio" value = "offset" id = "horizon-mode-offset" > < label for = "horizon-mode-offset" > Offset< / label >
< span id = "horizon-bands" > < span id = "horizon-bands-value" > 1< / span > < button class = "first" > − < / button > < button class = "last" > +< / button > < / span >
< / div >
< div > < svg id = "chart1" > < / svg > < / div >
< / div >
< script src = "../lib/d3.v2.js" > < / script >
< script src = "../lib/horizon.js" > < / script >
@ -31,19 +71,78 @@ text {
// the horizontChart model should have a "tooltip" like functionality that shows a point over the
// current value based on the mouse's x position
var width = 960,
height = 300;
nv.addGraph(function() {
var data = sine();
var chart = d3.horizon()
.width(600)
.height(60)
.bands(2)
//.bands(1)
.mode("offset")
//.mode("mirror")
.width(width)
.height(height)
.bands(1)
.mode("mirror")
.interpolate("basis");
var svg = d3.select('#chart1');
svg.datum(sine()).call(chart);
var svg = d3.select('#chart1').attr('width', width).attr('height', height);
var bg = svg.append('rect').attr('class', 'nv-horizonBackground').attr('height', height).attr('width', width);
svg.datum(data).call(chart);
var point = svg.append('circle').attr('class', 'nv-hoverPoint')
.attr('r', '4')
.attr('cx', -3)
.attr('cy', -3);
// Enable mode buttons.
d3.selectAll("#horizon-controls input[name=mode]").on("change", function() {
svg.call(chart.duration(0).mode(this.value));
});
// Enable bands buttons.
d3.selectAll("#horizon-bands button").data([-1, 1]).on("click", function(d) {
var n = Math.max(1, chart.bands() + d);
d3.select("#horizon-bands-value").text(n);
svg.call(chart.duration(1000).bands(n).height(height / n));
//just updating point temporarily here to have it not be visible on band change until user moves his mouse over the chart
point
.attr('cx', -3)
.attr('cy', -3)
});
//****THE CHANGES MADE TO THIS EXAMPLE BY ME ARE VERY UGLY.... TODO: Fix/Clean up after all functionality is correct
bg.on('mousemove', function() {
var m1 = d3.mouse(this);
var x = m1[0];
var scales = svg.node().__chart__;
var i = Math.round( scales.x.invert(x) );
//var y = (data[i][1] < 0 | | chart . mode ( ) = = ' mirror ' ? height : 0 ) - scales . y ( chart . mode ( ) = = ' mirror ' ? Math . abs ( data [ i ] [ 1 ] ) : data [ i ] [ 1 ] ) ;
var y = height - scales.y(chart.mode() == 'mirror' ? Math.abs(data[i][1]) : data[i][1] ) - (chart.mode() == 'offset' & & data[i][1] < 0 ? height : 0 ) ;
var t = scales.t(data[i][1]);
var bandRange = scales.y.range()[1];
y = y % (height / chart.bands());
//nv.log(y, height, y % height);
//nv.log(scales.y.range(), scales.y.domain());
//nv.log( x, i, data[i], y )
//nv.log(scales);
point
.attr('cx', x)
.attr('cy', y)
.attr('transform',
'translate(0,' + chart.bands + ')'
);
//var m2 = d3.mouse(d3.select('body').node());
//nv.log(m1, m2);
//nv.log(d3.event, this, d3.mouse(this));
});
return chart;
});