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

Cleaned up interactive guideline dispatch code.

Browse Source 
Integrated interactive guideline into cumulativeLineChart and updated
example.
master
Robin Hu 11 years ago
parent 575ed7950e
commit d974556d05
4 changed files with 81 additions and 13 deletions
Show Stats Download Patch File Download Diff File

4
examples/cumulativeLineChart.html
Unescape Escape View File

@ -40,6 +40,7 @@ svg {
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/interactiveLayer.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
@ -53,6 +54,7 @@ var chart;
nv.addGraph(function() {
chart = nv.models.cumulativeLineChart()
.useInteractiveGuideline(true)
.x(function(d) { return d[0] })
.y(function(d) { return d[1]/100 })
.color(d3.scale.category10().range())
@ -61,7 +63,7 @@ nv.addGraph(function() {
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
return d3.time.format('%m/%d/%y')(new Date(d))
});
chart.yAxis

7
examples/scatterChart.html
Unescape Escape View File

@ -70,8 +70,11 @@ nv.addGraph(function() {
.useVoronoi(true)
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(d3.format('.02f'))
chart.yAxis.tickFormat(d3.format('.02f'))
chart.xAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickFormat(d3.format('.02f'));
chart.tooltipContent(function(key) {
return '<h2>' + key + '</h2>';
});
d3.select('#test1 svg')
.datum(randomData(4,40))

67
src/models/cumulativeLineChart.js
Unescape Escape View File

@ -10,6 +10,7 @@ nv.models.cumulativeLineChart = function() {
, yAxis = nv.models.axis()
, legend = nv.models.legend()
, controls = nv.models.legend()
, interactiveLayer = nv.interactiveGuideline()
;
var margin = {top: 30, right: 30, bottom: 50, left: 60}
@ -22,6 +23,7 @@ nv.models.cumulativeLineChart = function() {
, rightAlignYAxis = false
, tooltips = true
, showControls = true
, useInteractiveGuideline = false
, rescaleY = true
, tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
@ -234,9 +236,14 @@ nv.models.cumulativeLineChart = function() {
gEnter.append('g').attr('class', 'nv-avgLinesWrap');
gEnter.append('g').attr('class', 'nv-legendWrap');
gEnter.append('g').attr('class', 'nv-controlsWrap');
gEnter.append('g').attr('class', 'nv-interactive');
//------------------------------------------------------------
//Set up interactive layer
if (useInteractiveGuideline) {
interactiveLayer.width(availableWidth).height(availableHeight).xScale(x);
wrap.select(".nv-interactive").call(interactiveLayer);
}
//------------------------------------------------------------
// Legend
@ -497,6 +504,52 @@ nv.models.cumulativeLineChart = function() {
});
*/
interactiveLayer.dispatch.on('elementMousemove', function(e) {
lines.dispatch.clearHighlights();
var singlePoint, pointIndex, pointXLocation, allData = [];
data
.filter(function(series, i) {
series.seriesIndex = i;
return !series.disabled;
})
.forEach(function(series,i) {
pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());
lines.dispatch.highlightPoint(i, pointIndex, true);
var point = series.values[pointIndex];
if (typeof point === 'undefined') return;
if (typeof singlePoint === 'undefined') singlePoint = point;
if (typeof pointXLocation === 'undefined') pointXLocation = chart.xScale()(chart.x()(point));
allData.push({
key: series.key,
value: chart.y()(point, e.pointIndex),
color: color(series,series.seriesIndex)
});
});
var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));
interactiveLayer.tooltip
.position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})
.chartContainer(that.parentNode)
.enabled(tooltips)
.valueFormatter(function(d,i) {
return yAxis.tickFormat()(d);
})
.data(
{
value: xValue,
series: allData
}
)();
interactiveLayer.renderGuideLine(pointXLocation);
});
interactiveLayer.dispatch.on("elementMouseout",function(e) {
dispatch.tooltipHide();
lines.dispatch.clearHighlights();
});
dispatch.on('tooltipShow', function(e) {
if (tooltips) showTooltip(e, that.parentNode);
});
@ -570,8 +623,9 @@ nv.models.cumulativeLineChart = function() {
chart.legend = legend;
chart.xAxis = xAxis;
chart.yAxis = yAxis;
chart.interactiveLayer = interactiveLayer;
d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'xScale','yScale', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');
chart.margin = function(_) {
if (!arguments.length) return margin;
@ -613,6 +667,15 @@ nv.models.cumulativeLineChart = function() {
return chart;
};
chart.useInteractiveGuideline = function(_) {
if(!arguments.length) return useInteractiveGuideline;
useInteractiveGuideline = _;
if (_ === true) {
lines.interactive(false);
}
return chart;
};
chart.showLegend = function(_) {
if (!arguments.length) return showLegend;
showLegend = _;

16
src/models/lineChart.js
Unescape Escape View File

@ -51,7 +51,6 @@ nv.models.lineChart = function() {
//------------------------------------------------------------
var showTooltip = function(e, offsetElement) {
if (useInteractiveGuideline) return;
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
top = e.pos[1] + ( offsetElement.offsetTop || 0),
x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
@ -179,7 +178,6 @@ nv.models.lineChart = function() {
lines
.width(availableWidth)
.height(availableHeight)
.interactive(!useInteractiveGuideline)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }));
@ -265,20 +263,20 @@ nv.models.lineChart = function() {
return !series.disabled;
})
.forEach(function(series,i) {
pointIndex = nv.interactiveBisect(series.values, e.pointXValue, lines.x());
pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());
lines.dispatch.highlightPoint(i, pointIndex, true);
var point = series.values[pointIndex];
if (typeof point === 'undefined') return;
if (typeof singlePoint === 'undefined') singlePoint = point;
if (typeof pointXLocation === 'undefined') pointXLocation = lines.xScale()(lines.x()(point));
if (typeof pointXLocation === 'undefined') pointXLocation = chart.xScale()(chart.x()(point));
allData.push({
key: series.key,
value: lines.y()(point, e.pointIndex),
value: chart.y()(point, e.pointIndex),
color: color(series,series.seriesIndex)
});
});
var xValue = xAxis.tickFormat()(lines.x()(singlePoint,pointIndex));
var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));
interactiveLayer.tooltip
.position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})
.chartContainer(that.parentNode)
@ -288,9 +286,7 @@ nv.models.lineChart = function() {
})
.data(
{
key: "",
value: xValue,
// seriesSelectedKey: e.series.key,
series: allData
}
)();
@ -360,6 +356,7 @@ nv.models.lineChart = function() {
chart.legend = legend;
chart.xAxis = xAxis;
chart.yAxis = yAxis;
chart.interactiveLayer = interactiveLayer;
d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'useVoronoi','id', 'interpolate');
@ -419,6 +416,9 @@ nv.models.lineChart = function() {
chart.useInteractiveGuideline = function(_) {
if(!arguments.length) return useInteractiveGuideline;
useInteractiveGuideline = _;
if (_ === true) {
lines.interactive(false);
}
return chart;
};

Write Preview
Loading…
Cancel
Save