From 3681e52ed6d2306399dec546a5dc409ba18cfa27 Mon Sep 17 00:00:00 2001 From: Robin Hu Date: Mon, 4 Nov 2013 10:06:37 -0500 Subject: [PATCH] [multibar horizontal] Added 'showBarLabels' feature, which displays the labels right next to the bar. --- nv.d3.js | 30 ++++++++++++++++++++++++--- src/models/multiBarHorizontal.js | 23 ++++++++++++++++++++ src/models/multiBarHorizontalChart.js | 7 ++++--- 3 files changed, 54 insertions(+), 6 deletions(-) diff --git a/nv.d3.js b/nv.d3.js index ab33aa6..da31eea 100644 --- a/nv.d3.js +++ b/nv.d3.js @@ -8526,6 +8526,7 @@ nv.models.multiBarHorizontal = function() { , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled , stacked = false , showValues = false + , showBarLabels = false , valuePadding = 60 , valueFormat = d3.format(',.2f') , delay = 1200 @@ -8738,6 +8739,21 @@ nv.models.multiBarHorizontal = function() { bars.selectAll('text').text(''); } + if (showBarLabels && !stacked) { + barsEnter.append('text').classed('nv-bar-label',true); + bars.select('text.nv-bar-label') + .attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'start' : 'end' }) + .attr('y', x.rangeBand() / (data.length * 2)) + .attr('dy', '.32em') + .text(function(d,i) { return getX(d,i) }); + bars.transition() + .select('text.nv-bar-label') + .attr('x', function(d,i) { return getY(d,i) < 0 ? y(0) - y(getY(d,i)) + 4 : -4 }); + } + else { + bars.selectAll('text.nv-bar-label').text(''); + } + bars .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'}) @@ -8912,6 +8928,13 @@ nv.models.multiBarHorizontal = function() { return chart; }; + chart.showBarLabels = function(_) { + if (!arguments.length) return showBarLabels; + showBarLabels = _; + return chart; + }; + + chart.valueFormat= function(_) { if (!arguments.length) return valueFormat; valueFormat = _; @@ -9183,7 +9206,7 @@ nv.models.multiBarHorizontalChart = function() { // Event Handling/Dispatching (in chart's scope) //------------------------------------------------------------ - legend.dispatch.on('stateChange', function(newState) { + legend.dispatch.on('stateChange', function(newState) { state = newState; dispatch.stateChange(state); chart.update(); @@ -9273,10 +9296,11 @@ nv.models.multiBarHorizontalChart = function() { chart.xAxis = xAxis; chart.yAxis = yAxis; - d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'clipEdge', 'id', 'delay', 'showValues', 'valueFormat', 'stacked', 'barColor'); + d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', + 'clipEdge', 'id', 'delay', 'showValues','showBarLabels', 'valueFormat', 'stacked', 'barColor'); chart.options = nv.utils.optionsFunc.bind(chart); - + chart.margin = function(_) { if (!arguments.length) return margin; margin.top = typeof _.top != 'undefined' ? _.top : margin.top; diff --git a/src/models/multiBarHorizontal.js b/src/models/multiBarHorizontal.js index d16d460..d617ae1 100644 --- a/src/models/multiBarHorizontal.js +++ b/src/models/multiBarHorizontal.js @@ -19,6 +19,7 @@ nv.models.multiBarHorizontal = function() { , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled , stacked = false , showValues = false + , showBarLabels = false , valuePadding = 60 , valueFormat = d3.format(',.2f') , delay = 1200 @@ -231,6 +232,21 @@ nv.models.multiBarHorizontal = function() { bars.selectAll('text').text(''); } + if (showBarLabels && !stacked) { + barsEnter.append('text').classed('nv-bar-label',true); + bars.select('text.nv-bar-label') + .attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'start' : 'end' }) + .attr('y', x.rangeBand() / (data.length * 2)) + .attr('dy', '.32em') + .text(function(d,i) { return getX(d,i) }); + bars.transition() + .select('text.nv-bar-label') + .attr('x', function(d,i) { return getY(d,i) < 0 ? y(0) - y(getY(d,i)) + 4 : -4 }); + } + else { + bars.selectAll('text.nv-bar-label').text(''); + } + bars .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'}) @@ -405,6 +421,13 @@ nv.models.multiBarHorizontal = function() { return chart; }; + chart.showBarLabels = function(_) { + if (!arguments.length) return showBarLabels; + showBarLabels = _; + return chart; + }; + + chart.valueFormat= function(_) { if (!arguments.length) return valueFormat; valueFormat = _; diff --git a/src/models/multiBarHorizontalChart.js b/src/models/multiBarHorizontalChart.js index 02aa6fa..3635c9e 100644 --- a/src/models/multiBarHorizontalChart.js +++ b/src/models/multiBarHorizontalChart.js @@ -252,7 +252,7 @@ nv.models.multiBarHorizontalChart = function() { // Event Handling/Dispatching (in chart's scope) //------------------------------------------------------------ - legend.dispatch.on('stateChange', function(newState) { + legend.dispatch.on('stateChange', function(newState) { state = newState; dispatch.stateChange(state); chart.update(); @@ -342,10 +342,11 @@ nv.models.multiBarHorizontalChart = function() { chart.xAxis = xAxis; chart.yAxis = yAxis; - d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'clipEdge', 'id', 'delay', 'showValues', 'valueFormat', 'stacked', 'barColor'); + d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', + 'clipEdge', 'id', 'delay', 'showValues','showBarLabels', 'valueFormat', 'stacked', 'barColor'); chart.options = nv.utils.optionsFunc.bind(chart); - + chart.margin = function(_) { if (!arguments.length) return margin; margin.top = typeof _.top != 'undefined' ? _.top : margin.top;