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

Added canvas class.

Browse Source
refactor
David Souther 10 years ago
parent 9201272013
commit ac2603c126
4 changed files with 1075 additions and 936 deletions
Show Stats Download Patch File Download Diff File

4
GruntFile.js
Unescape Escape View File

@ -14,6 +14,9 @@ module.exports = function(grunt) {
'src/interactiveLayer.js',
'src/tooltip.js',
'src/utils.js',
'src/canvas.js',
'src/models/axis.js',
'src/models/historicalBar.js',
'src/models/bullet.js',
@ -46,6 +49,7 @@ module.exports = function(grunt) {
'src/models/sparklinePlus.js',
'src/models/stackedArea.js',
'src/models/stackedAreaChart.js',
'src/outro.js'
],
dest: 'nv.d3.js'

1004
nv.d3.js
View File

File diff suppressed because it is too large Load Diff

211
src/canvas.js
Unescape Escape View File

@ -0,0 +1,211 @@
/*
Get a new SVG canvas, with margins and scales. Pass an object as `options` to
set values. Defaults:
{
size: # Size of SVG. Available size will be smaller by the size of the margins.
width: 960
height: 500
available:
width: 900
height: 450
margin: # Margins for the graphic.
top: 20
right: 20
bottom: 30
left: 40
scale: # d3.scales to scale against the canvas
x: linear
y: linear
domain: # Domain of scales for the canvas.
x: [0, 1]
y: [0, 1]
}
@param root String selector for finding the SVG element.
@param options Object matching the defaults to override.
@return Object with defaults, overriden by the options, and an additional two properties:
{
svg: SVG_Element # SVG root
defs: SVG_Defs_Element # <defs> to attach gradient and filter definitions to.
}
*/
function Canvas (root, options) {
var margin, width, height, svg, scales, canvas;
root == null && (root = 'body');
options == null && (options = {});
options.size || (options.size = {});
options.margin || (options.margin = {});
options.scale || (options.scale = {});
margin = {
top: options.margin.top || 20,
right: options.margin.top || 20,
bottom: options.margin.top || 30,
left: options.margin.top || 40
};
margin.leftright = margin.left + margin.right;
margin.topbottom = margin.top + margin.bottom;
width = (options.size.width || parseInt(svg.style('width')) || 960);
height = (options.size.height || parseInt(svg.style('height')) || 500);
svg = d3.select(root).attr({
width: width,
height: height
});
scales = {
x: d3.scale[options.scale.x || 'linear']()
.range([0, width])
.domain(options.domain.x || [0, 1])
.nice(),
y: d3.scale[options.scale.y || 'linear']()
.range([0, height])
.domain(options.domain.y || [0, 1])
.nice()
};
canvas = {
size: {
width: width,
height: height,
available: {
width: width - margin.leftright,
height: height - margin.topbottom
},
},
margin: margin,
scale: scales,
svg: svg,
defs: svg.select('defs'),
dispatch: d3.dispatch.apply(null, options.dispatch || [])
};
return canvas;
}
function Chart (root, options) {
var chart = Canvas(root, options);
chart.noData = options.noData || 'No Data Available.';
chart.color = options.color || nv.utils.defaultColor();
Chart.axis(chart, options);
Chart.state(chart, options);
Chart.legend(chart, options);
chart.tooltip = options.tooltip ||
function (key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + y + ' at ' + x + '</p>'
};
chart.duration = options.duration || 250;
chart.useInteractiveGuideline = options.useInteractiveGuideline || false;
return chart;
}
Chart.axis = function (chart, options) {
chart.axis = options.axis || options.axis = {
x: nv.models.axis(),
y: nv.models.axis()
};
chart.axis.rightAlignY = options.axis.rightAlignY || false;
chart.axis.topAlignX = options.axis.topAlignX || false;
xAxis
.orient((options.axis.topAlignX) ? 'top' : 'bottom')
.tickPadding(7);
yAxis
.orient((options.axis.rightAlignY) ? 'right' : 'left');
};
Chart.axis.build = function (chart) {
if (chart.axis.x) {
chart.axis.x
.scale(chart.scale.x)
.ticks(chart.size.avialable.width / 100)
.tickSize(-chart.size.avialable.eight, 0);
chart.g.select('.nv-x.nv-axis')
.attr('transform',
'translate(0,' + chart.scale.y.range()[0] + ')'
);
chart.g.select('.nv-x.nv-axis')
.call(chart.axis.x);
}
if (chart.axis.y) {
chart.axis.y
.scale(chart.scale.y)
.ticks(chart.size.available.height / 36)
.tickSize(-chart.size.available.width, 0);
chart.g.select('.nv-y.nv-axis')
.call(chart.axis.y);
}
};
Chart.legend = function (chart, options) {
chart.legend = options.legend || nv.models.legend();
}
Chart.legend.build = function (chart, data) {
if(!chart.legend){ return; }
chart.legend.width(availableWidth);
g.select('.nv-legendWrap')
.datum(data)
.call(legend);
if (otions.margin.top != legend.height()) {
otions.margin.top = legend.height();
availableHeight = (otions.height || parseInt(container.style('height')) || 400) - margin.top - margin.bottom;
}
wrap.select('.nv-legendWrap')
.attr('transform', 'translate(0,' + (-otions.margin.top) + ')')
}
Chart.defaultState = function (chart, options) {
chart.state = options.state || {};
chart.defaultState = options.defaultState || null;
}
Chart.defaultState.set = function(chart, data){
chart.state.disabled = data.map(function (d) {
return !!d.disabled
});
if (!chart.defaultState) {
var key;
chart.defaultState = {};
for (key in chart.state) {
if (chart.state[key] instanceof Array)
chart.defaultState[key] = chart.state[key].slice(0);
else
chart.defaultState[key] = chart.state[key];
}
}
}
Chart.checkData = function(chart, data){
if (!data || !data.length || !data.filter(function (d) {
return d.values.length
}).length) {
var noDataText = chart.container.selectAll('.nv-noData').data([noData]);
noDataText.enter().append('text')
.attr('class', 'nvd3 nv-noData')
.attr('dy', '-.7em')
.style('text-anchor', 'middle');
noDataText
.attr('x', margin.left + availableWidth / 2)
.attr('y', margin.top + availableHeight / 2)
.text(function (d) {
return d
});
return true;
} else {
container.selectAll('.nv-noData').remove();
return false;
}
}

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

@ -1,487 +1,343 @@
nv.models.lineChart = function() {
"use strict";
//============================================================
// Public Variables with Default Settings
//------------------------------------------------------------
var lines = nv.models.line()
, xAxis = nv.models.axis()
, yAxis = nv.models.axis()
, legend = nv.models.legend()
, interactiveLayer = nv.interactiveGuideline()
;
var margin = {top: 30, right: 20, bottom: 50, left: 60}
, color = nv.utils.defaultColor()
, width = null
, height = null
, showLegend = true
, showXAxis = true
, showYAxis = true
, rightAlignYAxis = false
, useInteractiveGuideline = false
, tooltips = true
, tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + y + ' at ' + x + '</p>'
}
, x
, y
, state = {}
, defaultState = null
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'renderEnd')
, duration = 250
;
xAxis
.orient('bottom')
.tickPadding(7)
;
yAxis
.orient((rightAlignYAxis) ? 'right' : 'left')
;
//============================================================
//============================================================
// Private Variables
//------------------------------------------------------------
var showTooltip = function(e, offsetElement) {
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
top = e.pos[1] + ( offsetElement.offsetTop || 0),
x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
y = yAxis.tickFormat()(lines.y()(e.point, e.pointIndex)),
content = tooltip(e.series.key, x, y, e, chart);
nv.tooltip.show([left, top], content, null, null, offsetElement);
};
var renderWatch = nv.utils.renderWatch(dispatch, duration);
//============================================================
function chart(selection) {
renderWatch.reset();
renderWatch.models(lines);
if (showXAxis) renderWatch.models(xAxis);
if (showYAxis) renderWatch.models(yAxis);
selection.each(function(data) {
var container = d3.select(this),
that = this;
var availableWidth = (width || parseInt(container.style('width')) || 960)
- margin.left - margin.right,
availableHeight = (height || parseInt(container.style('height')) || 400)
- margin.top - margin.bottom;
chart.update = function() {
if (duration === 0)
container.call(chart);
else
container.transition().duration(duration).call(chart)
};
chart.container = this;
//set state.disabled
state.disabled = data.map(function(d) { return !!d.disabled });
if (!defaultState) {
var key;
defaultState = {};
for (key in state) {
if (state[key] instanceof Array)
defaultState[key] = state[key].slice(0);
else
defaultState[key] = state[key];
}
}
//------------------------------------------------------------
// Display noData message if there's nothing to show.
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
var noDataText = container.selectAll('.nv-noData').data([noData]);
noDataText.enter().append('text')
.attr('class', 'nvd3 nv-noData')
.attr('dy', '-.7em')
.style('text-anchor', 'middle');
noDataText
.attr('x', margin.left + availableWidth / 2)
.attr('y', margin.top + availableHeight / 2)
.text(function(d) { return d });
/* global nv, d3, Chart */
nv.models.lineChart = function () {
'use strict';
//============================================================
// Public Variables with Default Settings
//------------------------------------------------------------
var lines = nv.models.line(),
interactiveLayer = nv.interactiveGuideline();
var defaults = {
margin: {
top: 30,
right: 20,
bottom: 50,
left: 60
},
dispatch: [
'tooltipShow',
'tooltipHide',
'stateChange',
'changeState',
'renderEnd'
]
};
//============================================================
//============================================================
// Private Variables
//------------------------------------------------------------
var showTooltip = function(canvas){
return function (e, offsetElement) {
var left = e.pos[0] + (offsetElement.offsetLeft || 0),
top = e.pos[1] + (offsetElement.offsetTop || 0),
x = canvas.axis.x.tickFormat()(canvas.scale.x()(e.point, e.pointIndex)),
y = canvas.axis.y.tickFormat()(canvas.scale.y()(e.point, e.pointIndex)),
content = canvas.tooltip(e.series.key, x, y, e, chart);
nv.tooltip.show([left, top], content, null, null, offsetElement);
};
};
// var renderWatch = nv.utils.renderWatch(canvas.dispatch, otions.duration);
//============================================================
function chart(selection) {
// renderWatch.reset();
// renderWatch.models(lines);
// if (showXAxis) renderWatch.models(xAxis);
// if (showYAxis) renderWatch.models(yAxis);
selection.each(function (data) {
var canvas = Chart.call(null, this, defaults);
var container = canvas.svg,
that = this;
canvas.updata = chart.update = function () {
if (canvas.duration === 0)
canvas.svg.call(chart);
else
canvas.svg.transition().duration(canvas.duration).call(chart)
};
nv.models.lineChart.build(canvas, data, lines);
});
// renderWatch.renderEnd('lineChart immediate');
return chart;
} else {
container.selectAll('.nv-noData').remove();
}
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Scales
x = lines.xScale();
y = lines.yScale();
//------------------------------------------------------------
//------------------------------------------------------------
// Setup containers and skeleton of chart
var wrap = container.selectAll('g.nv-wrap.nv-lineChart').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineChart').append('g');
var g = wrap.select('g');
gEnter.append("rect").style("opacity",0);
gEnter.append('g').attr('class', 'nv-x nv-axis');
gEnter.append('g').attr('class', 'nv-y nv-axis');
gEnter.append('g').attr('class', 'nv-linesWrap');
gEnter.append('g').attr('class', 'nv-legendWrap');
gEnter.append('g').attr('class', 'nv-interactive');
g.select("rect")
.attr("width",availableWidth)
.attr("height",(availableHeight > 0) ? availableHeight : 0);
//------------------------------------------------------------
// Legend
if (showLegend) {
legend.width(availableWidth);
g.select('.nv-legendWrap')
.datum(data)
.call(legend);
if ( margin.top != legend.height()) {
margin.top = legend.height();
availableHeight = (height || parseInt(container.style('height')) || 400)
- margin.top - margin.bottom;
}
wrap.select('.nv-legendWrap')
.attr('transform', 'translate(0,' + (-margin.top) +')')
}
//------------------------------------------------------------
}
//============================================================
// Event Handling/Dispatching (out of chart's scope)
//------------------------------------------------------------
// lines.dispatch.on('elementMouseover.tooltip', function (e) {
// e.pos = [e.pos[0] + canvas.margin.left, e.pos[1] + canvas.margin.top];
// canvas.dispatch.tooltipShow(e);
// });
// lines.dispatch.on('elementMouseout.tooltip', function (e) {
// canvas.dispatch.tooltipHide(e);
// });
// canvas.dispatch.on('tooltipHide', function () {
// if (canvas.tooltips) nv.tooltip.cleanup();
// });
//============================================================
//============================================================
// Expose Public Variables
//------------------------------------------------------------
// expose chart's sub-components
// chart.dispatch = canvas.dispatch;
// chart.lines = lines;
// chart.legend = canvas.legend;
// chart.xAxis = canvas.axis.x;
// chart.yAxis = canvas.yAxis;
// chart.interactiveLayer = interactiveLayer;
// d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'useVoronoi', 'id', 'interpolate');
// chart.options = nv.utils.optionsFunc.bind(chart);
// chart.margin = function (_) {
// if (!arguments.length) return margin;
// margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
// margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
// margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
// margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
// return chart;
// };
// chart.width = function (_) {
// if (!arguments.length) return width;
// width = _;
// return chart;
// };
// chart.height = function (_) {
// if (!arguments.length) return height;
// height = _;
// return chart;
// };
// chart.color = function (_) {
// if (!arguments.length) return color;
// color = nv.utils.getColor(_);
// legend.color(color);
// return chart;
// };
// chart.showLegend = function (_) {
// if (!arguments.length) return showLegend;
// showLegend = _;
// return chart;
// };
// chart.showXAxis = function (_) {
// if (!arguments.length) return showXAxis;
// showXAxis;
// return chart;
// };
// chart.showYAxis = function (_) {
// if (!arguments.length) return showYAxis;
// showYAxis = _;
// return chart;
// };
// chart.rightAlignYAxis = function (_) {
// if (!arguments.length) return rightAlignYAxis;
// rightAlignYAxis = _;
// yAxis.orient((_) ? 'right' : 'left');
// return chart;
// };
// chart.useInteractiveGuideline = function (_) {
// if (!arguments.length) return useInteractiveGuideline;
// useInteractiveGuideline = _;
// if (_ === true) {
// chart.interactive(false);
// chart.useVoronoi(false);
// }
// return chart;
// };
// chart.tooltips = function (_) {
// if (!arguments.length) return tooltips;
// tooltips = _;
// return chart;
// };
// chart.tooltipContent = function (_) {
// if (!arguments.length) return tooltip;
// tooltip = _;
// return chart;
// };
// chart.state = function (_) {
// if (!arguments.length) return state;
// state = _;
// return chart;
// };
// chart.defaultState = function (_) {
// if (!arguments.length) return defaultState;
// defaultState = _;
// return chart;
// };
// chart.noData = function (_) {
// if (!arguments.length) return noData;
// noData = _;
// return chart;
// };
// chart.transitionDuration = function (_) {
// nv.deprecated('lineChart.transitionDuration');
// return chart.duration(_);
// };
// chart.duration = function (_) {
// if (!arguments.length) return duration;
// duration = _;
// renderWatch.reset(duration);
// lines.duration(duration);
// xAxis.duration(duration);
// yAxis.duration(duration);
// return chart;
// }
//============================================================
return chart;
}
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
nv.models.lineChart.build = function(chart, data, lines){
Chart.state.set(canvas, data);
if (rightAlignYAxis) {
g.select(".nv-y.nv-axis")
.attr("transform", "translate(" + availableWidth + ",0)");
}
if(Chart.checkData(canvas, data)){
return chart;
}
//------------------------------------------------------------
// Main Chart Component(s)
nv.models.lineChart.wrap(chart, data);
Chart.legend.build(chart, data);
//------------------------------------------------------------
chart.wrap.attr('transform', 'translate(' + chart.margin.left + ',' + chart.margin.top + ')');
if (chart.axis.rightAlignY) {
chart.g.select('.nv-y.nv-axis')
.attr('transform', 'translate(' + chart.size.available.width + ',0)');
}
//------------------------------------------------------------
//Set up interactive layer
if (useInteractiveGuideline) {
//------------------------------------------------------------
// Main Chart Component(s)
//------------------------------------------------------------
//Set up interactive layer
if (chart.useInteractiveGuideline) {
interactiveLayer
.width(availableWidth)
.height(availableHeight)
.margin({left:margin.left, top:margin.top})
.svgContainer(container)
.xScale(x);
wrap.select(".nv-interactive").call(interactiveLayer);
}
lines
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
return d.color || color(d, i);
}).filter(function(d,i) { return !data[i].disabled }));
var linesWrap = g.select('.nv-linesWrap')
.datum(data.filter(function(d) { return !d.disabled }))
linesWrap.call(lines);
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Axes
if (showXAxis) {
xAxis
.scale(x)
.ticks( availableWidth / 100 )
.tickSize(-availableHeight, 0);
g.select('.nv-x.nv-axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')');
g.select('.nv-x.nv-axis')
.call(xAxis);
}
if (showYAxis) {
yAxis
.scale(y)
.ticks( availableHeight / 36 )
.tickSize( -availableWidth, 0);
g.select('.nv-y.nv-axis')
.call(yAxis);
}
//------------------------------------------------------------
.width(chart.size.available.width)
.height(chart.size.available.height)
.margin({
left: chart.margin.left,
top: chart.margin.top
})
.svgContainer(container)
.xScale(chart.scale.x);
chart.wrap.select('.nv-interactive').call(interactiveLayer);
}
//============================================================
// Event Handling/Dispatching (in chart's scope)
//------------------------------------------------------------
nv.models.lineChart.lines(chart, data, lines);
legend.dispatch.on('stateChange', function(newState) {
state = newState;
dispatch.stateChange(state);
chart.update();
});
//------------------------------------------------------------
//------------------------------------------------------------
// Setup Axes
Chart.axis.build(chart, data);
interactiveLayer.dispatch.on('elementMousemove', function(e) {
lines.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.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,pointIndex));
allData.push({
key: series.key,
value: chart.y()(point, pointIndex),
color: color(series,series.seriesIndex)
});
});
//Highlight the tooltip entry based on which point the mouse is closest to.
if (allData.length > 2) {
//------------------------------------------------------------
//============================================================
// Event Handling/Dispatching (in chart's scope)
//------------------------------------------------------------
chart.legend.dispatch.on('stateChange', function (newState) {
chart.state = newState;
chart.dispatch.stateChange(chart.state);
chart.update();
});
interactiveLayer.dispatch.on('elementMousemove', function (e) {
lines.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.scale.x());
lines.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.scale.x()(point, pointIndex));
allData.push({
key: series.key,
value: chart.scale.y()(point, pointIndex),
color: chart.color(series, series.seriesIndex)
});
});
//Highlight the tooltip entry based on which point the mouse is closest to.
if (allData.length > 2) {
var yValue = chart.yScale().invert(e.mouseY);
var domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]);
var threshold = 0.03 * domainExtent;
var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value}),yValue,threshold);
var indexToHighlight = nv.nearestValueIndex(allData.map(function (d) {
return d.value
}), yValue, threshold);
if (indexToHighlight !== null)
allData[indexToHighlight].highlight = true;
}
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.clearHighlights();
});
dispatch.on('tooltipShow', function(e) {
if (tooltips) showTooltip(e, that.parentNode);
});
dispatch.on('changeState', function(e) {
allData[indexToHighlight].highlight = true;
}
var xValue = chart.axis.x.tickFormat()(chart.scale.x()(singlePoint, pointIndex));
interactiveLayer.tooltip
.position({
left: pointXLocation + chart.margin.left,
top: e.mouseY + chart.margin.top
})
.chartContainer(that.parentNode)
.enabled(chart.tooltips)
.valueFormatter(function (d, i) {
return chart.axis.y.tickFormat()(d);
})
.data({
value: xValue,
series: allData
})();
interactiveLayer.renderGuideLine(pointXLocation);
});
interactiveLayer.dispatch.on('elementMouseout', function (e) {
chart.dispatch.tooltipHide();
lines.clearHighlights();
});
chart.dispatch.on('tooltipShow', function (e) {
if (chart.tooltips) showTooltip(e, that.parentNode);
});
chart.dispatch.on('changeState', function (e) {
if (typeof e.disabled !== 'undefined' && data.length === e.disabled.length) {
data.forEach(function(series,i) {
series.disabled = e.disabled[i];
});
state.disabled = e.disabled;
data.forEach(function (series, i) {
series.disabled = e.disabled[i];
});
chart.state.disabled = e.disabled;
}
chart.update();
});
//============================================================
});
renderWatch.renderEnd('lineChart immediate');
return chart;
}
//============================================================
// Event Handling/Dispatching (out of chart's scope)
//------------------------------------------------------------
lines.dispatch.on('elementMouseover.tooltip', function(e) {
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
dispatch.tooltipShow(e);
});
lines.dispatch.on('elementMouseout.tooltip', function(e) {
dispatch.tooltipHide(e);
});
dispatch.on('tooltipHide', function() {
if (tooltips) nv.tooltip.cleanup();
});
//============================================================
//============================================================
// Expose Public Variables
//------------------------------------------------------------
// expose chart's sub-components
chart.dispatch = dispatch;
chart.lines = lines;
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', 'xRange', 'yRange'
, 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'useVoronoi','id', 'interpolate');
chart.options = nv.utils.optionsFunc.bind(chart);
chart.margin = function(_) {
if (!arguments.length) return margin;
margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
};
nv.models.lineChart.wrap = function(chart, data) {
chart.wrap = chart.container.selectAll('g.nv-wrap.nv-lineChart').data([data]);
var gEnter = chart.wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineChart').append('g');
chart.g = chart.wrap.select('g');
gEnter.append('rect').style('opacity', 0);
gEnter.append('g').attr('class', 'nv-x nv-axis');
gEnter.append('g').attr('class', 'nv-y nv-axis');
gEnter.append('g').attr('class', 'nv-linesWrap');
gEnter.append('g').attr('class', 'nv-legendWrap');
gEnter.append('g').attr('class', 'nv-interactive');
chart.g.select('rect')
.attr({
width: chart.size.available.width,
height: Math.max(chart.size.available.height, 0)
});
};
nv.models.lineChart.lines = function(chart, data, lines){
lines
.width(chart.size.available.width)
.height(chart.size.available.height)
.color(data.map(function (d, i) {
return d.color || chart.color(d, i);
}).filter(function (d, i) {
return !data[i].disabled
}));
var linesWrap = chart.g.select('.nv-linesWrap')
.datum(data.filter(function (d) {
return !d.disabled
}))
linesWrap.call(lines);
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.color = function(_) {
if (!arguments.length) return color;
color = nv.utils.getColor(_);
legend.color(color);
return chart;
};
chart.showLegend = function(_) {
if (!arguments.length) return showLegend;
showLegend = _;
return chart;
};
chart.showXAxis = function(_) {
if (!arguments.length) return showXAxis;
showXAxis = _;
return chart;
};
chart.showYAxis = function(_) {
if (!arguments.length) return showYAxis;
showYAxis = _;
return chart;
};
chart.rightAlignYAxis = function(_) {
if(!arguments.length) return rightAlignYAxis;
rightAlignYAxis = _;
yAxis.orient( (_) ? 'right' : 'left');
return chart;
};
chart.useInteractiveGuideline = function(_) {
if(!arguments.length) return useInteractiveGuideline;
useInteractiveGuideline = _;
if (_ === true) {
chart.interactive(false);
chart.useVoronoi(false);
}
return chart;
};
chart.tooltips = function(_) {
if (!arguments.length) return tooltips;
tooltips = _;
return chart;
};
chart.tooltipContent = function(_) {
if (!arguments.length) return tooltip;
tooltip = _;
return chart;
};
chart.state = function(_) {
if (!arguments.length) return state;
state = _;
return chart;
};
chart.defaultState = function(_) {
if (!arguments.length) return defaultState;
defaultState = _;
return chart;
};
chart.noData = function(_) {
if (!arguments.length) return noData;
noData = _;
return chart;
};
chart.transitionDuration = function(_) {
nv.deprecated('lineChart.transitionDuration');
return chart.duration(_);
};
chart.duration = function(_) {
if (!arguments.length) return duration;
duration = _;
renderWatch.reset(duration);
lines.duration(duration);
xAxis.duration(duration);
yAxis.duration(duration);
return chart;
}
//============================================================
return chart;
}

Write Preview
Loading…
Cancel
Save