diff --git a/examples/historicalBarChart.html b/examples/historicalBarChart.html index 173bdaa..975d989 100644 --- a/examples/historicalBarChart.html +++ b/examples/historicalBarChart.html @@ -18,6 +18,7 @@ text { + diff --git a/src/models/historicalBar.js b/src/models/historicalBar.js index 0538f90..0c72909 100644 --- a/src/models/historicalBar.js +++ b/src/models/historicalBar.js @@ -64,8 +64,8 @@ nv.models.historicalBar = function() { //------------------------------------------------------------ // Setup containers and skeleton of chart - var wrap = container.selectAll('g.nv-wrap.nv-bar').data([data[0].values]); - var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bar'); + var wrap = container.selectAll('g.nv-wrap.nv-historicalBar-' + id).data([data[0].values]); + var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-historicalBar-' + id); var defsEnter = wrapEnter.append('defs'); var gEnter = wrapEnter.append('g'); var g = wrap.select('g'); @@ -182,7 +182,20 @@ nv.models.historicalBar = function() { return chart; } + //Create methods to allow outside functions to highlight a specific bar. + chart.highlightPoint = function(pointIndex, isHoverOver) { + d3.select(".nv-historicalBar-" + id) + .select(".nv-bars .nv-bar-0-" + pointIndex) + .classed("hover", isHoverOver) + ; + }; + chart.clearHighlights = function() { + d3.select(".nv-historicalBar-" + id) + .select(".nv-bars .nv-bar.hover") + .classed("hover", false) + ; + }; //============================================================ // Expose Public Variables //------------------------------------------------------------ diff --git a/src/models/historicalBarChart.js b/src/models/historicalBarChart.js index c4f5e5d..a72f0da 100644 --- a/src/models/historicalBarChart.js +++ b/src/models/historicalBarChart.js @@ -138,8 +138,8 @@ nv.models.historicalBarChart = function() { //------------------------------------------------------------ // 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 wrap = container.selectAll('g.nv-wrap.nv-historicalBarChart').data([data]); + var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-historicalBarChart').append('g'); var g = wrap.select('g'); gEnter.append('g').attr('class', 'nv-x nv-axis'); @@ -329,7 +329,8 @@ nv.models.historicalBarChart = function() { chart.xAxis = xAxis; chart.yAxis = yAxis; - d3.rebind(chart, bars, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate'); + d3.rebind(chart, bars, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', + 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate','highlightPoint','clearHighlights'); chart.margin = function(_) { if (!arguments.length) return margin;