nv.models.linePlusBar = function() { var margin = {top: 30, right: 60, bottom: 50, left: 60}, getWidth = function() { return 960 }, getHeight = function() { return 500 }, dotRadius = function() { return 2.5 }, getX = function(d) { return d.x }, getY = function(d) { return d.y }, color = d3.scale.category20().range(), dispatch = d3.dispatch('tooltipShow', 'tooltipHide'); var x = d3.scale.linear(), y1 = d3.scale.linear(), y2 = d3.scale.linear(), xAxis = nv.models.axis().scale(x).orient('bottom'), yAxis1 = nv.models.axis().scale(y1).orient('left'), yAxis2 = nv.models.axis().scale(y2).orient('right'), legend = nv.models.legend().height(30), lines = nv.models.line(), bars = nv.models.historicalBar(); function chart(selection) { selection.each(function(data) { var width = getWidth(), height = getHeight(), availableWidth = width - margin.left - margin.right, availableHeight = height - margin.top - margin.bottom; var series1 = data.filter(function(d) { return !d.disabled && d.bar }) .map(function(d) { return d.values.map(function(d,i) { return { x: getX(d,i), y: getY(d,i) } }) }); var series2 = data.filter(function(d) { return !d.disabled && !d.bar }) .map(function(d) { return d.values.map(function(d,i) { return { x: getX(d,i), y: getY(d,i) } }) }); x .domain(d3.extent(d3.merge(series1.concat(series2)), function(d) { return d.x } )) .range([0, availableWidth]); y1 .domain(d3.extent(d3.merge(series1), function(d) { return d.y } )) .range([availableHeight, 0]); y2 .domain(d3.extent(d3.merge(series2), function(d) { return d.y } )) .range([availableHeight, 0]); lines .width(availableWidth) .height(availableHeight) .color(data.map(function(d,i) { return d.color || color[i % 10]; }).filter(function(d,i) { return !data[i].disabled && !data[i].bar })) bars .width(availableWidth) .height(availableHeight) .color(data.map(function(d,i) { return d.color || color[i % 10]; }).filter(function(d,i) { return !data[i].disabled && data[i].bar })) var wrap = d3.select(this).selectAll('g.wrap.linePlusBar').data([data]); var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 linePlusBar').append('g'); gEnter.append('g').attr('class', 'x axis'); gEnter.append('g').attr('class', 'y1 axis'); gEnter.append('g').attr('class', 'y2 axis'); gEnter.append('g').attr('class', 'barsWrap'); gEnter.append('g').attr('class', 'linesWrap'); gEnter.append('g').attr('class', 'legendWrap'); legend.dispatch.on('legendClick', function(d,i) { d.disabled = !d.disabled; if (!data.filter(function(d) { return !d.disabled }).length) { data.map(function(d) { d.disabled = false; wrap.selectAll('.series').classed('disabled', false); return d; }); } selection.transition().call(chart); }); lines.dispatch.on('elementMouseover.tooltip', function(e) { dispatch.tooltipShow({ point: e.point, series: e.series, pos: [e.pos[0] + margin.left, e.pos[1] + margin.top], seriesIndex: e.seriesIndex, pointIndex: e.pointIndex }); }); lines.dispatch.on('elementMouseout.tooltip', function(e) { dispatch.tooltipHide(e); }); bars.dispatch.on('elementMouseover.tooltip', function(e) { e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top]; dispatch.tooltipShow(e); }); bars.dispatch.on('elementMouseout.tooltip', function(e) { dispatch.tooltipHide(e); }); //TODO: margins should be adjusted based on what components are used: axes, axis labels, legend margin.top = legend.height(); var g = wrap.select('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); legend.width(width/2 - margin.right); g.select('.legendWrap') .datum(data.map(function(series) { series.key = series.key + (series.bar ? ' (left axis)' : ' (right axis)'); return series; })) .attr('transform', 'translate(' + (width/2 - margin.left) + ',' + (-margin.top) +')') .call(legend); var barsData = data.filter(function(d) { return !d.disabled && d.bar }); var barsWrap = g.select('.barsWrap') .datum(barsData.length ? barsData : [{values:[]}]) //.datum(data.filter(function(d) { return !d.disabled && d.bar })) var linesWrap = g.select('.linesWrap') .datum(data.filter(function(d) { return !d.disabled && !d.bar })) d3.transition(barsWrap).call(bars); d3.transition(linesWrap).call(lines); xAxis .domain(x.domain()) .range(x.range()) .ticks( width / 100 ) .tickSize(-availableHeight, 0); g.select('.x.axis') .attr('transform', 'translate(0,' + y1.range()[0] + ')'); d3.transition(g.select('.x.axis')) .call(xAxis); yAxis1 .domain(y1.domain()) .range(y1.range()) .ticks( height / 36 ) .tickSize(-availableWidth, 0); d3.transition(g.select('.y1.axis')) .call(yAxis1); yAxis2 .domain(y2.domain()) .range(y2.range()) .ticks( height / 36 ) .tickSize(series1.length ? 0 : -availableWidth, 0); // Show the y2 rules only if y1 has none g.select('.y2.axis') .attr('transform', 'translate(' + x.range()[1] + ',0)'); d3.transition(g.select('.y2.axis')) .call(yAxis2); }); return chart; } chart.dispatch = dispatch; chart.legend = legend; chart.lines = lines; chart.bars = bars; chart.xAxis = xAxis; chart.yAxis1 = yAxis1; chart.yAxis2 = yAxis2; //d3.rebind(chart, lines, 'interactive'); //consider rebinding x and y as well chart.x = function(_) { if (!arguments.length) return getX; getX = _; lines.x(_); bars.x(_); return chart; }; chart.y = function(_) { if (!arguments.length) return getY; getY = _; lines.y(_); bars.y(_); return chart; }; chart.margin = function(_) { if (!arguments.length) return margin; margin = _; return chart; }; chart.width = function(_) { if (!arguments.length) return getWidth; getWidth = d3.functor(_); return chart; }; chart.height = function(_) { if (!arguments.length) return getHeight; getHeight = d3.functor(_); return chart; }; chart.dotRadius = function(_) { if (!arguments.length) return dotRadius; dotRadius = d3.functor(_); lines.dotRadius = _; return chart; }; chart.color = function(_) { if (!arguments.length) return color; color = _; legend.color(_); return chart; }; return chart; }