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

Added discreteBarHorizontalChart to makefile

Browse Source
master-patched
Bob Monteverde 12 years ago
parent d87cac47dd
commit 85d3545f7a
3 changed files with 280 additions and 72 deletions
Show Stats Download Patch File Download Diff File

1
Makefile
Unescape Escape View File

@ -20,6 +20,7 @@ JS_FILES = \
src/models/multiBar.js \
src/models/multiBarWithLegend.js \
src/models/multiBarHorizontal.js \
src/models/multiBarHorizontalChart.js \
src/models/multiBarHorizontalWithLegend.js \
src/models/pie.js \
src/models/scatter.js \

344
nv.d3.js
Unescape Escape View File

@ -1496,7 +1496,6 @@ nv.models.discreteBar = function() {
xDomain, yDomain,
x0, y0;
//var x = d3.scale.linear(),
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout');
@ -1529,7 +1528,7 @@ nv.models.discreteBar = function() {
})
});
x .domain(d3.merge(seriesData).map(function(d) { return d.x }))
x .domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))
.rangeBands([0, availableWidth], .1);
y .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(forceY)))
@ -3923,31 +3922,24 @@ nv.models.multiBarWithLegend = function() {
return chart;
}
/***
* This should be pretty close to identical to the multiBar model, but this model
* has the bars horizontal.
* Currently naming the vertical axis X, due to helper functions that think the
* bars are vertical
*/
nv.models.multiBarHorizontal = function() {
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 960,
height = 500,
id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one
x = d3.scale.ordinal(),
y = d3.scale.linear(),
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,
stacked = false,
color = d3.scale.category20().range(),
stacked = false,
showValues = false,
valueFormat = d3.format(',.2f'),
xDomain, yDomain,
x0, y0;
//var x = d3.scale.linear(),
var x = d3.scale.ordinal(),
y = d3.scale.linear(),
dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout');
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout');
function chart(selection) {
@ -3959,15 +3951,12 @@ nv.models.multiBarHorizontal = function() {
x0 = x0 || x;
y0 = y0 || y;
if (stacked) {
//var stackedData = d3.layout.stack()
if (stacked)
data = d3.layout.stack()
.offset('zero')
.values(function(d){ return d.values })
.y(getY)
(data);
}
//add series index to each data point for reference
@ -3987,7 +3976,7 @@ nv.models.multiBarHorizontal = function() {
})
});
x .domain(d3.merge(seriesData).map(function(d) { return d.x }))
x .domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))
.rangeBands([0, availableHeight], .1);
y .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y + (stacked ? d.y0 : 0) }).concat(forceY)))
@ -4007,29 +3996,11 @@ nv.models.multiBarHorizontal = 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 + ')' : '');
var groups = wrap.select('.groups').selectAll('.group')
.data(function(d) { return d }, function(d) { return d.key });
groups.enter().append('g')
.style('stroke-opacity', 1e-6)
.style('fill-opacity', 1e-6)
/*
.attr('transform', function(d,i) {
return stacked ?
'translate(0,0)'
: 'translate(' + (i * x.rangeBand() / data.length ) + ',0)'
});
*/
.style('fill-opacity', 1e-6);
d3.transition(groups.exit())
.style('stroke-opacity', 1e-6)
.style('fill-opacity', 1e-6)
@ -4040,13 +4011,6 @@ nv.models.multiBarHorizontal = function() {
.style('fill', function(d,i){ return color[i % 10] })
.style('stroke', function(d,i){ return color[i % 10] });
d3.transition(groups)
/*
.attr('transform', function(d,i) {
return stacked ?
'translate(0,0)'
: 'translate(' + (i * x.rangeBand() / data.length ) + ',0)'
})
*/
.style('stroke-opacity', 1)
.style('fill-opacity', .75);
@ -4059,12 +4023,9 @@ nv.models.multiBarHorizontal = function() {
var barsEnter = bars.enter().append('rect')
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'bar negative' : 'bar positive'})
//.attr('fill', function(d,i) { return color[0]; })
.attr('y', function(d,i,j) {
return stacked ? 0 : (j * x.rangeBand() / data.length )
})
//.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('x', function(d) { return y0(stacked ? d.y0 : 0) })
.attr('width', 0)
.attr('height', x.rangeBand() / (stacked ? 1 : data.length) )
@ -4075,7 +4036,6 @@ nv.models.multiBarHorizontal = function() {
point: d,
series: data[d.series],
pos: [ y(getY(d,i) + (stacked ? d.y0 : 0)), x(getX(d,i)) + (x.rangeBand() * (stacked ? data.length / 2 : d.series + .5) / data.length) ],
//pos: [x(getX(d,i)) + (x.rangeBand() * (stacked ? data.length / 2 : d.series + .5) / data.length), y(getY(d,i) + (stacked ? d.y0 : 0))],
pointIndex: i,
seriesIndex: d.series,
e: d3.event
@ -4124,11 +4084,9 @@ nv.models.multiBarHorizontal = function() {
.delay(function(d,i) { return i * 1000 / data[0].values.length })
.attr('x', function(d,i) {
return y(d.y0);
//return y(getY(d,i) + d.y0);
//return y(getY(d,i) + (stacked ? d.y0 : 0));
})
.attr('width', function(d,i) {
return Math.abs(y(d.y + d.y0) - y(d.y0))
return Math.abs(y(getY(d,i) + d.y0) - y(d.y0))
})
.each('end', function() {
d3.transition(d3.select(this))
@ -4152,8 +4110,7 @@ nv.models.multiBarHorizontal = function() {
y(0)
})
.attr('width', function(d,i) {
return Math.abs(y(d.y) - y(0))
//return Math.abs(y(d.y + (stacked ? d.y0 : 0)) - y((stacked ? d.y0 : 0)))
return Math.abs(y(getY(d,i)) - y(0))
});
})
@ -4207,6 +4164,18 @@ nv.models.multiBarHorizontal = function() {
return chart;
};
chart.xScale = function(_) {
if (!arguments.length) return x;
x = _;
return chart;
};
chart.yScale = function(_) {
if (!arguments.length) return y;
y = _;
return chart;
};
chart.xDomain = function(_) {
if (!arguments.length) return xDomain;
xDomain = _;
@ -4231,12 +4200,6 @@ nv.models.multiBarHorizontal = function() {
return chart;
};
chart.clipEdge = function(_) {
if (!arguments.length) return clipEdge;
clipEdge = _;
return chart;
};
chart.color = function(_) {
if (!arguments.length) return color;
color = _;
@ -4249,6 +4212,257 @@ nv.models.multiBarHorizontal = function() {
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;
}
nv.models.multiBarHorizontalChart = function() {
var margin = {top: 30, right: 20, bottom: 50, left: 60},
width = null,
height = null,
color = d3.scale.category20().range(),
showControls = true,
tooltips = true,
tooltip = function(key, x, y, e, graph) {
return '<h3>' + x + '</h3>' +
'<p>' + y + '</p>'
};
var multibar = nv.models.multiBarHorizontal().stacked(false),
x = multibar.xScale(),
y = multibar.yScale(),
xAxis = nv.models.axis().scale(x).orient('left').highlightZero(false),
yAxis = nv.models.axis().scale(y).orient('bottom'),
legend = nv.models.legend().height(30),
controls = nv.models.legend().height(30),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
xAxis.tickFormat(function(d) { return d });
yAxis.tickFormat(d3.format(',.1f'));
var showTooltip = function(e, offsetElement) {
//console.log('left: ' + offsetElement.offsetLeft);
//console.log('top: ' + offsetElement.offsetLeft);
//TODO: FIX offsetLeft and offSet top do not work if container is shifted anywhere
//var offsetElement = document.getElementById(selector.substr(1)),
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
top = e.pos[1] + ( offsetElement.offsetTop || 0),
x = xAxis.tickFormat()(multibar.x()(e.point)),
y = yAxis.tickFormat()(multibar.y()(e.point)),
content = tooltip(e.series.key, x, y, e, chart);
nv.tooltip.show([left, top], content, e.value < 0 ? 'e' : 'w');
};
//TODO: let user select default
var controlsData = [
{ key: 'Grouped' },
{ key: 'Stacked', disabled: true },
];
function chart(selection) {
selection.each(function(data) {
var container = d3.select(this);
var availableWidth = (width || parseInt(container.style('width')) || 960)
- margin.left - margin.right,
availableHeight = (height || parseInt(container.style('height')) || 400)
- margin.top - margin.bottom;
multibar
.width(availableWidth)
.height(availableHeight)
.color(data.map(function(d,i) {
return d.color || color[i % 10];
}).filter(function(d,i) { return !data[i].disabled }))
var wrap = container.selectAll('g.wrap.multiBarHorizontalChart').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multiBarHorizontalChart').append('g');
gEnter.append('g').attr('class', 'x axis');
gEnter.append('g').attr('class', 'y axis');
gEnter.append('g').attr('class', 'linesWrap');
gEnter.append('g').attr('class', 'legendWrap');
gEnter.append('g').attr('class', 'controlsWrap');
//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(availableWidth / 2);
g.select('.legendWrap')
.datum(data)
.attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')')
.call(legend);
if (showControls) {
controls.width(180).color(['#444', '#444', '#444']);
g.select('.controlsWrap')
.datum(controlsData)
.attr('transform', 'translate(0,' + (-margin.top) +')')
.call(controls);
}
var linesWrap = g.select('.linesWrap')
.datum(data.filter(function(d) { return !d.disabled }))
d3.transition(linesWrap).call(multibar);
xAxis
.scale(x)
.ticks( availableHeight / 24 )
.tickSize(-availableWidth, 0);
d3.transition(g.select('.x.axis'))
.call(xAxis);
var xTicks = g.select('.x.axis').selectAll('g');
xTicks
.selectAll('line, text')
.style('opacity', 1)
xTicks.filter(function(d,i) {
return i % Math.ceil(data[0].values.length / (availableWidth / 100)) !== 0;
})
.selectAll('line, text')
.style('opacity', 0)
yAxis
.domain(y.domain())
.range(y.range())
.ticks( availableWidth / 100 )
.tickSize( -availableHeight, 0);
g.select('.y.axis')
.attr('transform', 'translate(0,' + availableHeight + ')');
d3.transition(g.select('.y.axis'))
.call(yAxis);
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);
});
controls.dispatch.on('legendClick', function(d,i) {
if (!d.disabled) return;
controlsData = controlsData.map(function(s) {
s.disabled = true;
return s;
});
d.disabled = false;
switch (d.key) {
case 'Grouped':
multibar.stacked(false);
break;
case 'Stacked':
multibar.stacked(true);
break;
}
selection.transition().call(chart);
});
multibar.dispatch.on('elementMouseover.tooltip', function(e) {
e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
dispatch.tooltipShow(e);
});
if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, container[0][0]) } ); // TODO: maybe merge with above?
multibar.dispatch.on('elementMouseout.tooltip', function(e) {
dispatch.tooltipHide(e);
});
if (tooltips) dispatch.on('tooltipHide', nv.tooltip.cleanup);
});
return chart;
}
chart.dispatch = dispatch;
chart.legend = legend;
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id');
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
width = d3.functor(_);
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = d3.functor(_);
return chart;
};
chart.showControls = function(_) {
if (!arguments.length) return showControls;
showControls = _;
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;
@ -4302,12 +4516,8 @@ nv.models.multiBarHorizontalWithLegend = function() {
}
//x .domain(d3.extent(d3.merge(seriesData).map(function(d) { return d.x }).concat(multibar.forceX) ))
//.range([0, availableWidth]);
x .domain(d3.merge(seriesData).map(function(d) { return d.x }))
.rangeBands([0, availableHeight], .1);
//.rangeRoundBands([0, availableWidth], .1);
y .domain(d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(multibar.forceY) ))
.range([0, availableWidth]);
@ -4315,8 +4525,6 @@ nv.models.multiBarHorizontalWithLegend = function() {
multibar
.width(availableWidth)
.height(availableHeight)
//.xDomain(x.domain())
//.yDomain(y.domain())
.color(data.map(function(d,i) {
return d.color || color[i % 10];
}).filter(function(d,i) { return !data[i].disabled }))
@ -4366,8 +4574,6 @@ nv.models.multiBarHorizontalWithLegend = function() {
xAxis
.scale(x)
//.domain(x.domain())
//.range(x.range())
.ticks( availableHeight / 24 )
.tickSize(-availableWidth, 0);

7
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save