merging in css changes

master-patched
Bob Monteverde 12 years ago
commit 71c7fb3c51

@ -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 \

@ -108,11 +108,7 @@ nv.addGraph(function() {
.transition().duration(500)
.call(chart);
nv.utils.windowResize(function() {
d3.select('#chart1 svg')
.transition().duration(0)
.call(chart);
});
nv.utils.windowResize(chart.update);
return chart;
});

@ -65,7 +65,8 @@ nv.addGraph(function() {
.call(chart);
//TODO: Figure out a good way to do this automatically
nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
nv.utils.windowResize(chart.update);
//nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
return chart;
});

@ -0,0 +1,163 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/d3.css" rel="stylesheet" type="text/css">
<style>
body {
overflow-y:scroll;
}
text {
font: 12px sans-serif;
}
#chart1 {
margin: 10px;
min-width: 100px;
min-height: 100px;
/*
Minimum height and width is a good idea to prevent negative SVG dimensions...
For example width should be =< margin.left + margin.right + 1,
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
*/
}
#chart1 svg {
height: 500px;
}
</style>
<body>
<div id="chart1">
<svg></svg>
</div>
<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/multiBarHorizontal.js"></script>
<script src="../src/models/multiBarHorizontalChart.js"></script>
<script src="stream_layers.js"></script>
<script>
long_short_data = [
{
key: 'Short',
color: '#d62728',
values: [
{
"label" : "Information Technology" ,
"value" : -1.8746444827653
} ,
{
"label" : "Consumer Discretionary" ,
"value" : -8.0961543492239
} ,
{
"label" : "Health Care" ,
"value" : -0.57072943117674
} ,
{
"label" : "Consumer Staples" ,
"value" : -2.4174010336624
} ,
{
"label" : "Financials" ,
"value" : -0.72009071426284
} ,
{
"label" : "Industrials" ,
"value" : -0.77154485523777
} ,
{
"label" : "Energy" ,
"value" : -0.90152097798131
} ,
{
"label" : "Materials" ,
"value" : -0.91445417330854
} ,
{
"label" : "Telecommunication Services" ,
"value" : -0.055746319141851
}
]
},
{
key: 'Long',
color: '#1f77b4',
values: [
{
"label" : "Information Technology" ,
"value" : 25.307646510375
} ,
{
"label" : "Consumer Discretionary" ,
"value" : 16.756779544553
} ,
{
"label" : "Health Care" ,
"value" : 18.451534877007
} ,
{
"label" : "Consumer Staples" ,
"value" : 8.6142352811805
} ,
{
"label" : "Financials" ,
"value" : 7.8082472075876
} ,
{
"label" : "Industrials" ,
"value" : 5.259101026956
} ,
{
"label" : "Energy" ,
"value" : 0.30947953487127
} ,
{
"label" : "Materials" ,
"value" : 0
} ,
{
"label" : "Telecommunication Services" ,
"value" : 0
}
]
}
];
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 30, right: 20, bottom: 50, left: 160})
.showValues(true)
.tooltips(false)
.showControls(false);
chart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select('#chart1 svg')
.datum(long_short_data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
</script>

@ -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)))
@ -1578,7 +1577,6 @@ nv.models.discreteBar = function() {
var barsEnter = bars.enter().append('g')
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'bar negative' : 'bar positive'})
.attr('transform', function(d,i,j) {
return 'translate(' + x(getX(d,i)) + ', ' + y(0) + ')'
})
@ -1643,6 +1641,8 @@ nv.models.discreteBar = function() {
.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)) })
} else {
bars.selectAll('text').remove();
}
bars
@ -3923,31 +3923,25 @@ 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,
valuePadding = 60,
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 +3953,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,16 +3978,18 @@ 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)))
.range([0, availableWidth]);
//.range([0, availableWidth]);
if (showValues && !stacked) y.range([(y.domain()[0] < 0 ? valuePadding : 0), availableWidth - (y.domain()[1] > 0 ? valuePadding : 0) ]);
else y.range([0, availableWidth]);
var wrap = d3.select(this).selectAll('g.wrap.multibar').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multibar');
var wrap = d3.select(this).selectAll('g.wrap.multibarHorizontal').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multibarHorizontal');
var defsEnter = wrapEnter.append('defs');
var gEnter = wrapEnter.append('g');
@ -4007,29 +4000,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,34 +4015,22 @@ 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);
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')
.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 )
var barsEnter = bars.enter().append('g')
.attr('transform', function(d,i,j) {
//return 'translate(' + (stacked ? 0 : (j * x.rangeBand() / data.length )) + ',' + y0(stacked ? d.y0 : 0) + ')'
//return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length )) + ')'
return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length ) + x(getX(d,i))) + ')'
})
//.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) )
.on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
d3.select(this).classed('hover', true);
dispatch.elementMouseover({
@ -4075,7 +4038,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
@ -4116,19 +4078,70 @@ nv.models.multiBarHorizontal = function() {
});
d3.event.stopPropagation();
});
barsEnter.append('rect')
.attr('width', 0)
.attr('height', x.rangeBand() / (stacked ? 1 : data.length) )
if (showValues && !stacked) {
barsEnter.append('text')
.attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'end' : 'start' })
bars.selectAll('text')
.attr('y', x.rangeBand() / 2)
.attr('dy', '-.5em')
.text(function(d,i) { return valueFormat(getY(d,i)) })
d3.transition(bars)
.delay(function(d,i) { return i * 1000 / data[0].values.length })
.selectAll('text')
.attr('dx', function(d,i) { return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4 })
} else {
bars.selectAll('text').remove();
}
bars
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'bar negative' : 'bar positive'})
.attr('transform', function(d,i) { return 'translate(0,' + x(getX(d,i)) + ')'; })
//.attr('transform', function(d,i,j) {
//return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + x(getX(d,i)) + ')'
//})
if (stacked)
d3.transition(bars)
.delay(function(d,i) { return i * 1000 / data[0].values.length })
.attr('transform', function(d,i) {
//return 'translate(' + y(d.y0) + ',0)'
return 'translate(' + y(d.y0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length )) + ')'
})
.selectAll('rect')
.attr('width', function(d,i) {
return Math.abs(y(getY(d,i) + d.y0) - y(d.y0))
})
.attr('height', x.rangeBand() );
else
d3.transition(bars)
.delay(function(d,i) { return i * 1200 / data[0].values.length })
.attr('transform', function(d,i) {
//TODO: stacked must be all positive or all negative, not both?
return 'translate(' +
(getY(d,i) < 0 ? y(getY(d,i)) : y(0))
+ ',' +
(d.series * x.rangeBand() / data.length
+
x(getX(d,i)) )
+ ')'
})
.selectAll('rect')
.attr('height', x.rangeBand() / data.length )
.attr('width', function(d,i) {
return Math.abs(y(getY(d,i)) - y(0))
});
/*
if (stacked)
d3.transition(bars)
.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,10 +4165,10 @@ 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 +4220,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 +4256,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 = _;
@ -4244,11 +4263,268 @@ nv.models.multiBarHorizontal = 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.valueFormat= function(_) {
if (!arguments.length) return valueFormat;
valueFormat = _;
return chart;
};
chart.valuePadding = function(_) {
if (!arguments.length) return valuePadding;
valuePadding = _;
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', 'showValues', 'valueFormat');
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 +4578,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 +4587,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 +4636,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

File diff suppressed because one or more lines are too long

@ -72,7 +72,9 @@ svg {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Trying to get SVG to act like a greedy block in all browsers */
display: block;
width:100%;
}
@ -179,17 +181,22 @@ svg .title {
*/
.nvd3 .multibar .groups rect,
.nvd3 .multibarHorizontal .groups rect,
.nvd3 .discretebar .groups rect {
stroke-opacity: 0;
}
.nvd3 .multibar .groups rect:hover,
.nvd3 .multibarHorizontal .groups rect:hover,
.nvd3 .discretebar .groups rect:hover {
fill-opacity: 1;
}
.nvd3 .discretebar .groups text {
.nvd3 .discretebar .groups text,
.nvd3 .multibarHorizontal .groups text {
font-weight: bold;
fill: rgba(0,0,0,1);
stroke: rgba(0,0,0,0);
}
/***********

@ -15,7 +15,6 @@ nv.models.discreteBar = function() {
xDomain, yDomain,
x0, y0;
//var x = d3.scale.linear(),
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout');
@ -48,7 +47,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)))
@ -60,7 +59,6 @@ nv.models.discreteBar = function() {
var wrap = d3.select(this).selectAll('g.wrap.discretebar').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 discretebar');
var defsEnter = wrapEnter.append('defs');
var gEnter = wrapEnter.append('g');
gEnter.append('g').attr('class', 'groups');
@ -97,7 +95,6 @@ nv.models.discreteBar = function() {
var barsEnter = bars.enter().append('g')
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'bar negative' : 'bar positive'})
.attr('transform', function(d,i,j) {
return 'translate(' + x(getX(d,i)) + ', ' + y(0) + ')'
})
@ -162,6 +159,8 @@ nv.models.discreteBar = function() {
.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)) })
} else {
bars.selectAll('text').remove();
}
bars

@ -62,6 +62,7 @@ nv.models.discreteBarChart = function() {
var wrap = container.selectAll('g.wrap.discreteBarWithAxes').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 discreteBarWithAxes').append('g');
var defsEnter = gEnter.append('defs');
gEnter.append('g').attr('class', 'x axis');
gEnter.append('g').attr('class', 'y axis');
@ -81,6 +82,41 @@ nv.models.discreteBarChart = function() {
d3.transition(barsWrap).call(discretebar);
defsEnter.append('clipPath')
.attr('id', 'x-label-clip-' + discretebar.id())
.append('rect')
g.select('#x-label-clip-' + discretebar.id() + ' rect')
.attr('width', x.rangeBand() * (staggerLabels ? 2 : 1))
.attr('height', 16)
.attr('x', -x.rangeBand() / (staggerLabels ? 1 : 2 ));
/*
var evenLabelClips = defsEnter.append('clipPath')
.attr('id', 'x-label-clip-even-' + discretebar.id())
.selectAll('rect')
.data(function(d) { return d[0].values.filter(function(d,i) { return i % 2 === 0 }) });
evenLabelClips.enter().append('rect')
.attr('width', x.rangeBand())
.attr('height', 32)
.attr('y', y.range()[0])
.attr('x', function(d,i) { return x(discretebar.x()(d,i)) });
var oddLabelClips = defsEnter.append('clipPath')
.attr('id', 'x-label-clip-odd-' + discretebar.id())
.selectAll('rect')
.data(function(d) { return d[0].values.filter(function(d,i) { return i % 2 === 1 }) });
oddLabelClips.enter().append('rect')
.attr('width', x.rangeBand())
.attr('height', 16)
.attr('y', y.range()[0] + 16 + (staggerLabels ? 12: 0))
.attr('x', function(d,i) { return x(discretebar.x()(d,i)) });
*/
xAxis
.scale(x)
.ticks( availableWidth / 100 )
@ -99,6 +135,10 @@ nv.models.discreteBarChart = function() {
.selectAll('text')
.attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '0' : '12') + ')' })
xTicks
.selectAll('text')
.attr('clip-path', function(d,i,j) { return 'url(#x-label-clip-' + discretebar.id() + ')' });
yAxis
.scale(y)
@ -120,6 +160,12 @@ nv.models.discreteBarChart = function() {
});
if (tooltips) dispatch.on('tooltipHide', nv.tooltip.cleanup);
//TODO: decide if this makes sense to add into all the models for ease of updating (updating without needing the selection)
chart.update = function() {
selection.transition().call(chart);
}
});
return chart;
@ -127,6 +173,7 @@ nv.models.discreteBarChart = function() {
chart.dispatch = dispatch;
chart.discretebar = discretebar; // really just makign the accessible for discretebar.dispatch, may rethink slightly
chart.xAxis = xAxis;
chart.yAxis = yAxis;

@ -1,29 +1,23 @@
/***
* 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,
valuePadding = 60,
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) {
@ -35,15 +29,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
@ -63,16 +54,18 @@ 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)))
.range([0, availableWidth]);
//.range([0, availableWidth]);
if (showValues && !stacked) y.range([(y.domain()[0] < 0 ? valuePadding : 0), availableWidth - (y.domain()[1] > 0 ? valuePadding : 0) ]);
else y.range([0, availableWidth]);
var wrap = d3.select(this).selectAll('g.wrap.multibar').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multibar');
var wrap = d3.select(this).selectAll('g.wrap.multibarHorizontal').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multibarHorizontal');
var defsEnter = wrapEnter.append('defs');
var gEnter = wrapEnter.append('g');
@ -83,29 +76,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)
@ -116,34 +91,22 @@ 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);
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')
.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 )
var barsEnter = bars.enter().append('g')
.attr('transform', function(d,i,j) {
//return 'translate(' + (stacked ? 0 : (j * x.rangeBand() / data.length )) + ',' + y0(stacked ? d.y0 : 0) + ')'
//return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length )) + ')'
return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length ) + x(getX(d,i))) + ')'
})
//.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) )
.on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
d3.select(this).classed('hover', true);
dispatch.elementMouseover({
@ -151,7 +114,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
@ -192,19 +154,70 @@ nv.models.multiBarHorizontal = function() {
});
d3.event.stopPropagation();
});
barsEnter.append('rect')
.attr('width', 0)
.attr('height', x.rangeBand() / (stacked ? 1 : data.length) )
if (showValues && !stacked) {
barsEnter.append('text')
.attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'end' : 'start' })
bars.selectAll('text')
.attr('y', x.rangeBand() / 2)
.attr('dy', '-.5em')
.text(function(d,i) { return valueFormat(getY(d,i)) })
d3.transition(bars)
.delay(function(d,i) { return i * 1000 / data[0].values.length })
.selectAll('text')
.attr('dx', function(d,i) { return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4 })
} else {
bars.selectAll('text').remove();
}
bars
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'bar negative' : 'bar positive'})
.attr('transform', function(d,i) { return 'translate(0,' + x(getX(d,i)) + ')'; })
//.attr('transform', function(d,i,j) {
//return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + x(getX(d,i)) + ')'
//})
if (stacked)
d3.transition(bars)
.delay(function(d,i) { return i * 1000 / data[0].values.length })
.attr('transform', function(d,i) {
//return 'translate(' + y(d.y0) + ',0)'
return 'translate(' + y(d.y0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length )) + ')'
})
.selectAll('rect')
.attr('width', function(d,i) {
return Math.abs(y(getY(d,i) + d.y0) - y(d.y0))
})
.attr('height', x.rangeBand() );
else
d3.transition(bars)
.delay(function(d,i) { return i * 1200 / data[0].values.length })
.attr('transform', function(d,i) {
//TODO: stacked must be all positive or all negative, not both?
return 'translate(' +
(getY(d,i) < 0 ? y(getY(d,i)) : y(0))
+ ',' +
(d.series * x.rangeBand() / data.length
+
x(getX(d,i)) )
+ ')'
})
.selectAll('rect')
.attr('height', x.rangeBand() / data.length )
.attr('width', function(d,i) {
return Math.abs(y(getY(d,i)) - y(0))
});
/*
if (stacked)
d3.transition(bars)
.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))
@ -228,10 +241,10 @@ 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))
});
})
*/
@ -283,6 +296,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 = _;
@ -307,12 +332,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 = _;
@ -320,11 +339,28 @@ nv.models.multiBarHorizontal = 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.valueFormat= function(_) {
if (!arguments.length) return valueFormat;
valueFormat = _;
return chart;
};
chart.valuePadding = function(_) {
if (!arguments.length) return valuePadding;
valuePadding = _;
return chart;
};
return chart;

@ -0,0 +1,247 @@
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);
//TODO: decide if this makes sense to add into all the models for ease of updating (updating without needing the selection)
chart.update = function() {
selection.transition().call(chart);
}
});
return chart;
}
chart.dispatch = dispatch;
chart.multibar = multibar; // really just makign the accessible for multibar.dispatch, may rethink slightly
chart.legend = legend;
chart.xAxis = xAxis;
chart.yAxis = yAxis;
d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'showValues', 'valueFormat');
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;
}

@ -47,12 +47,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]);
@ -60,8 +56,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 }))
@ -111,8 +105,6 @@ nv.models.multiBarHorizontalWithLegend = function() {
xAxis
.scale(x)
//.domain(x.domain())
//.range(x.range())
.ticks( availableHeight / 24 )
.tickSize(-availableWidth, 0);

Loading…
Cancel
Save