blob42/nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

working on interaction in the horizon chart example, its ugly, but starting to work. Will be making an nvd3 model to utilize the horizon chart with some extra interaction

Browse Source
This commit is contained in:
Bob Monteverde 2012-08-01 03:24:13 -04:00
parent c0c19c2cd0
commit c8054ae308
1 changed files with 114 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
examples/horizon.html
View File

@ -3,21 +3,61 @@
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css"> <link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style> <style>
/*
* {
margin: 0;
padding: 0;
border: 0;
}
*/
text {
font: 10px sans-serif; body {
font-family: sans-serif;
} }
#chart1 { svg {
width: 600px; top: 10px;
height: 60px; 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> </style>
<body> <body>
<h2>Horizon:</h2> <div id="wrap">
<div><svg id="chart1"></svg></div>
<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">&#x2212;</button><button class="last">+</button></span>
</div>
<div><svg id="chart1"></svg></div>
</div>
<script src="../lib/d3.v2.js"></script> <script src="../lib/d3.v2.js"></script>
<script src="../lib/horizon.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 // the horizontChart model should have a "tooltip" like functionality that shows a point over the
// current value based on the mouse's x position // current value based on the mouse's x position
var width = 960,
height = 300;
nv.addGraph(function() { nv.addGraph(function() {
var data = sine();
var chart = d3.horizon() var chart = d3.horizon()
.width(600) .width(width)
.height(60) .height(height)
.bands(2) .bands(1)
//.bands(1) .mode("mirror")
.mode("offset")
//.mode("mirror")
.interpolate("basis"); .interpolate("basis");
var svg = d3.select('#chart1'); var svg = d3.select('#chart1').attr('width', width).attr('height', height);
svg.datum(sine()).call(chart); 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; return chart;
}); });