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

added showValues option, as well as tooltips (toggle, defaults true), and tooltipContent options to discreteBar

Browse Source
master-patched
Bob Monteverde 12 years ago
parent 6c75fd4f31
commit 0a92e82fd7
4 changed files with 71 additions and 54 deletions
Show Stats Download Patch File Download Diff File

2
examples/discreteBarChart.html
Unescape Escape View File

@ -99,6 +99,8 @@ nv.addGraph(function() {
.y(function(d) { return d.value })
.staggerLabels(true)
//.staggerLabels(historicalBarChart[0].values.length > 8)
.tooltips(false)
.showValues(true)
d3.select('#chart1 svg')

4
src/d3.css
Unescape Escape View File

@ -187,6 +187,10 @@ svg .title {
fill-opacity: 1;
}
.nvd3 .discretebar .groups text {
font-weight: bold;
}
/***********
* Pie Chart
*/

94
src/models/discreteBar.js
Unescape Escape View File

@ -9,8 +9,9 @@ nv.models.discreteBar = function() {
getX = function(d) { return d.x },
getY = function(d) { return d.y },
forceY = [0], // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
clipEdge = true,
color = d3.scale.category20().range(),
showValues = false,
valueFormat = d3.format(',.2f'),
xDomain, yDomain,
x0, y0;
@ -51,8 +52,10 @@ nv.models.discreteBar = function() {
.rangeBands([0, availableWidth], .1);
y .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(forceY)))
.range([availableHeight, 0]);
//.range([availableHeight, 0]);
if (showValues) y.range([availableHeight - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] < 0 ? 0 : 12]);
else y.range([availableHeight, 0]);
var wrap = d3.select(this).selectAll('g.wrap.discretebar').data([data]);
@ -67,15 +70,6 @@ nv.models.discreteBar = function() {
defsEnter.append('clipPath')
.attr('id', 'edge-clip-' + id)
.append('rect');
wrap.select('#edge-clip-' + id + ' rect')
.attr('width', availableWidth)
.attr('height', availableHeight);
g .attr('clip-path', clipEdge ? 'url(#edge-clip-' + id + ')' : '');
//TODO: by definiteion, the discrete bar should not have multiple groups, will modify/remove later
@ -91,32 +85,22 @@ nv.models.discreteBar = function() {
groups
.attr('class', function(d,i) { return 'group series-' + i })
.classed('hover', function(d) { return d.hover })
//.style('fill', function(d,i){ return color[i % 10] })
//.style('stroke', function(d,i){ return color[i % 10] });
d3.transition(groups)
.style('stroke-opacity', 1)
.style('fill-opacity', .75);
var bars = groups.selectAll('rect.bar')
var bars = groups.selectAll('g.bar')
.data(function(d) { return d.values });
bars.exit().remove();
var barsEnter = bars.enter().append('rect')
var barsEnter = bars.enter().append('g')
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'bar negative' : 'bar positive'})
//.attr('fill', function(d,i) { return color[0]; })
.attr('x', function(d,i,j) {
return j * x.rangeBand() / data.length
.attr('transform', function(d,i,j) {
return 'translate(' + x(getX(d,i)) + ', ' + y(0) + ')'
})
//.attr('y', function(d,i) { return y(Math.max(0, getY(d,i))) })
//.attr('height', function(d,i) { return Math.abs(y(getY(d,i)) - y(0)) })
.attr('y', function(d) { return y0(0) })
.attr('height', 0)
.attr('width', x.rangeBand() / data.length )
.style('fill', function(d,i){ return d.color || color[i % 10] }) //this is a 'hack' to allow multiple colors in a single series... will need to rethink this methodology
.style('stroke', function(d,i){ return d.color || color[i % 10] })
.on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
d3.select(this).classed('hover', true);
dispatch.elementMouseover({
@ -164,26 +148,35 @@ nv.models.discreteBar = function() {
});
d3.event.stopPropagation();
});
barsEnter.append('rect')
.attr('height', 0)
.attr('width', x.rangeBand() / data.length )
.style('fill', function(d,i){ return d.color || color[i % 10] }) //this is a 'hack' to allow multiple colors in a single series... will need to rethink this methodology
.style('stroke', function(d,i){ return d.color || color[i % 10] })
if (showValues) {
barsEnter.append('text')
.attr('text-anchor', 'middle')
bars.selectAll('text')
.attr('dx', x.rangeBand() / 2)
.attr('dy', function(d,i) { return getY(d,i) < 0 ? y(getY(d,i)) - y(0) + 12 : -4 })
.text(function(d,i) { return valueFormat(getY(d,i)) })
}
bars
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'bar negative' : 'bar positive'})
.attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
//.attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
d3.transition(bars)
.delay(function(d,i) { return i * 1200 / data[0].values.length })
.attr('x', function(d,i) {
return d.series * x.rangeBand() / data.length
.attr('transform', function(d,i) {
return 'translate(' + x(getX(d,i)) + ', ' + (getY(d,i) < 0 ? y(0) : y(getY(d,i))) + ')'
})
.selectAll('rect')
.attr('width', x.rangeBand() / data.length)
.each('end', function() {
d3.transition(d3.select(this))
.attr('y', function(d,i) {
return getY(d,i) < 0 ?
y(0) :
y(getY(d,i))
})
.attr('height', function(d,i) {
return Math.abs(y(getY(d,i)) - y(0))
});
})
.attr('height', function(d,i) {
return Math.abs(y(getY(d,i)) - y(0))
});
@ -265,12 +258,6 @@ nv.models.discreteBar = function() {
return chart;
};
chart.clipEdge = function(_) {
if (!arguments.length) return clipEdge;
clipEdge = _;
return chart;
};
chart.color = function(_) {
if (!arguments.length) return color;
color = _;
@ -278,11 +265,22 @@ nv.models.discreteBar = function() {
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;
return chart;
if (!arguments.length) return id;
id = _;
return chart;
};
chart.showValues = function(_) {
if (!arguments.length) return showValues;
showValues = _;
return chart;
};
chart.valuesFormat= function(_) {
if (!arguments.length) return valueFormat;
valueFormat = _;
return chart;
};
return chart;

25
src/models/discreteBarChart.js
Unescape Escape View File

@ -5,9 +5,10 @@ nv.models.discreteBarChart = function() {
height = null,
color = d3.scale.category20().range(),
staggerLabels = false,
tooltips = true,
tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + y + ' at ' + x + '</p>'
return '<h3>' + x + '</h3>' +
'<p>' + y + '</p>'
};
@ -85,7 +86,7 @@ nv.models.discreteBarChart = function() {
.tickSize(-availableHeight, 0);
g.select('.x.axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')');
.attr('transform', 'translate(0,' + (y.range()[0] + (discretebar.showValues() ? 16 : 0)) + ')');
d3.transition(g.select('.x.axis'))
.call(xAxis);
@ -118,12 +119,12 @@ nv.models.discreteBarChart = function() {
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
dispatch.tooltipShow(e);
});
dispatch.on('tooltipShow', function(e) { showTooltip(e, this) } ); // TODO: maybe merge with above?
if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, this) } ); // TODO: maybe merge with above?
discretebar.dispatch.on('elementMouseout.tooltip', function(e) {
dispatch.tooltipHide(e);
});
dispatch.on('tooltipHide', nv.tooltip.cleanup);
if (tooltips) dispatch.on('tooltipHide', nv.tooltip.cleanup);
});
@ -135,7 +136,7 @@ nv.models.discreteBarChart = function() {
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, discretebar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id');
d3.rebind(chart, discretebar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'id', 'showValues', 'valueFormat');
chart.margin = function(_) {
@ -169,6 +170,18 @@ nv.models.discreteBarChart = function() {
return chart;
};
chart.tooltips = function(_) {
if (!arguments.length) return tooltips;
tooltips = _;
return chart;
};
chart.tooltipContent = function(_) {
if (!arguments.length) return tooltip;
tooltip = _;
return chart;
};
return chart;
}

Write Preview
Loading…
Cancel
Save