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

#68: giving the controls additional space on the stacked area chart

Browse Source
master-patched
Ricardo 11 years ago
parent 7058d5382b
commit 5079b67649
3 changed files with 58 additions and 23 deletions
Show Stats Download Patch File Download Diff File

64
nv.d3.js
Unescape Escape View File

@ -806,7 +806,7 @@ nv.models.historicalBar = function() {
if (y.domain()[0] === y.domain()[1])
y.domain()[0] ?
y.domain([y.domain()[0] - y.domain()[0] * 0.01, y.domain()[1] + y.domain()[1] * 0.01])
y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
: y.domain([-1,1]);
//------------------------------------------------------------
@ -5370,7 +5370,7 @@ nv.models.multiBar = function() {
if (y.domain()[0] === y.domain()[1])
y.domain()[0] ?
y.domain([y.domain()[0] - y.domain()[0] * 0.01, y.domain()[1] + y.domain()[1] * 0.01])
y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
: y.domain([-1,1]);
@ -7386,7 +7386,7 @@ nv.models.ohlcBar = function() {
if (y.domain()[0] === y.domain()[1])
y.domain()[0] ?
y.domain([y.domain()[0] - y.domain()[0] * 0.01, y.domain()[1] + y.domain()[1] * 0.01])
y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
: y.domain([-1,1]);
//------------------------------------------------------------
@ -7699,6 +7699,7 @@ nv.models.pie = function() {
, donutLabelsOutside = false
, labelThreshold = .02 //if slice percentage is under this, don't show label
, donut = false
, labelSunbeamLayout = false
, dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
;
@ -7710,6 +7711,7 @@ nv.models.pie = function() {
var availableWidth = width - margin.left - margin.right,
availableHeight = height - margin.top - margin.bottom,
radius = Math.min(availableWidth, availableHeight) / 2,
arcRadius = radius-(radius / 5),
container = d3.select(this);
@ -7742,7 +7744,7 @@ nv.models.pie = function() {
var arc = d3.svg.arc()
.outerRadius((radius-(radius / 5)));
.outerRadius(arcRadius);
if (donut) arc.innerRadius(radius / 2);
@ -7828,9 +7830,21 @@ nv.models.pie = function() {
group
.attr('transform', function(d) {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return 'translate(' + labelsArc.centroid(d) + ')'
if (labelSunbeamLayout) {
d.outerRadius = arcRadius + 10; // Set Outer Coordinate
d.innerRadius = arcRadius + 15; // Set Inner Coordinate
var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
if ((d.startAngle+d.endAngle)/2 < Math.PI) {
rotateAngle -= 90;
} else {
rotateAngle += 90;
}
return 'translate(' + labelsArc.centroid(d) + ') rotate(' + rotateAngle + ')';
} else {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return 'translate(' + labelsArc.centroid(d) + ')'
}
});
group.append('rect')
@ -7840,7 +7854,7 @@ nv.models.pie = function() {
.attr("ry", 3);
group.append('text')
.style('text-anchor', 'middle') //center the text on it's origin
.style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
.style('fill', '#000')
@ -7848,9 +7862,21 @@ nv.models.pie = function() {
slices.select(".nv-label").transition()
.attr('transform', function(d) {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return 'translate(' + labelsArc.centroid(d) + ')';
if (labelSunbeamLayout) {
d.outerRadius = arcRadius + 10; // Set Outer Coordinate
d.innerRadius = arcRadius + 15; // Set Inner Coordinate
var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
if ((d.startAngle+d.endAngle)/2 < Math.PI) {
rotateAngle -= 90;
} else {
rotateAngle += 90;
}
return 'translate(' + labelsArc.centroid(d) + ') rotate(' + rotateAngle + ')';
} else {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return 'translate(' + labelsArc.centroid(d) + ')'
}
});
slices.each(function(d, i) {
@ -7858,6 +7884,7 @@ nv.models.pie = function() {
slice
.select(".nv-label text")
.style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
.text(function(d, i) {
var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
return (d.value && percent > labelThreshold) ? getX(d.data) : '';
@ -7953,6 +7980,12 @@ nv.models.pie = function() {
showLabels = _;
return chart;
};
chart.labelSunbeamLayout = function(_) {
if (!arguments.length) return labelSunbeamLayout;
labelSunbeamLayout = _;
return chart;
};
chart.donutLabelsOutside = function(_) {
if (!arguments.length) return donutLabelsOutside;
@ -8380,7 +8413,7 @@ nv.models.scatter = function() {
if (y.domain()[0] === y.domain()[1])
y.domain()[0] ?
y.domain([y.domain()[0] - y.domain()[0] * 0.01, y.domain()[1] + y.domain()[1] * 0.01])
y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
: y.domain([-1,1]);
@ -10883,6 +10916,7 @@ nv.models.stackedAreaChart = function() {
, state = { style: stacked.style() }
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
, controlWidth = 250
;
xAxis
@ -10986,7 +11020,7 @@ nv.models.stackedAreaChart = function() {
if (showLegend) {
legend
.width( availableWidth * 2 / 3 );
.width( availableWidth - controlWidth );
g.select('.nv-legendWrap')
.datum(data)
@ -10999,7 +11033,7 @@ nv.models.stackedAreaChart = function() {
}
g.select('.nv-legendWrap')
.attr('transform', 'translate(' + ( availableWidth * 1 / 3 ) + ',' + (-margin.top) +')');
.attr('transform', 'translate(' + controlWidth + ',' + (-margin.top) +')');
}
//------------------------------------------------------------
@ -11016,7 +11050,7 @@ nv.models.stackedAreaChart = function() {
];
controls
.width( Math.min(280, availableWidth * 1 / 3) )
.width( controlWidth )
.color(['#444', '#444', '#444']);
g.select('.nv-controlsWrap')

10
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
src/models/stackedAreaChart.js
Unescape Escape View File

@ -29,6 +29,7 @@ nv.models.stackedAreaChart = function() {
, state = { style: stacked.style() }
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
, controlWidth = 250
;
xAxis
@ -132,7 +133,7 @@ nv.models.stackedAreaChart = function() {
if (showLegend) {
legend
.width( availableWidth * 2 / 3 );
.width( availableWidth - controlWidth );
g.select('.nv-legendWrap')
.datum(data)
@ -145,7 +146,7 @@ nv.models.stackedAreaChart = function() {
}
g.select('.nv-legendWrap')
.attr('transform', 'translate(' + ( availableWidth * 1 / 3 ) + ',' + (-margin.top) +')');
.attr('transform', 'translate(' + controlWidth + ',' + (-margin.top) +')');
}
//------------------------------------------------------------
@ -162,7 +163,7 @@ nv.models.stackedAreaChart = function() {
];
controls
.width( Math.min(280, availableWidth * 1 / 3) )
.width( controlWidth )
.color(['#444', '#444', '#444']);
g.select('.nv-controlsWrap')

Write Preview
Loading…
Cancel
Save