| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <link href="../src/nv.d3.css" rel="stylesheet" type="text/css"> |
| <style> |
| |
| /* |
| * { |
| margin: 0; |
| padding: 0; |
| border: 0; |
| } |
| */ |
| |
| |
| body { |
| font-family: sans-serif; |
| } |
| |
| 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> |
| |
| <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> |
| <script src="../nv.d3.js"></script> |
| <script src="../src/utils.js"></script> |
| <script> |
| |
| |
| //TODO: create a nv.models.horizonChart model |
| // (if need be an nv.models.horizon model as well, but might get away with just using d3.horizon) |
| // 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(width) |
| .height(height) |
| .bands(1) |
| .mode("mirror") |
| .interpolate("basis"); |
| |
| 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', scales.x(i)) |
| .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; |
| }); |
| |
| |
| |
| function sine() { |
| var sin = []; |
| |
| for (var i = 0; i < 200; i++) { |
| sin.push([ i, Math.sin(i/10) + .2 ]); |
| } |
| |
| return sin; |
| } |
| |
| |
| </script> |
