Updated pie.js to create labels in a separate nv-pieLabels <g>
This commit is contained in:
Robin Hu
parent
92285645b9
commit
81e60d6185
785
nv.d3.js
785
nv.d3.js
@ -1418,6 +1418,337 @@ nv.utils.optionsFunc = function(args) {
|
||||
//============================================================
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
//TODO: consider deprecating and using multibar with single series for this
|
||||
nv.models.historicalBar = function() {
|
||||
"use strict";
|
||||
//============================================================
|
||||
// Public Variables with Default Settings
|
||||
//------------------------------------------------------------
|
||||
|
||||
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.linear()
|
||||
, y = d3.scale.linear()
|
||||
, getX = function(d) { return d.x }
|
||||
, getY = function(d) { return d.y }
|
||||
, forceX = []
|
||||
, forceY = [0]
|
||||
, padData = false
|
||||
, clipEdge = true
|
||||
, color = nv.utils.defaultColor()
|
||||
, xDomain
|
||||
, yDomain
|
||||
, xRange
|
||||
, yRange
|
||||
, dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
|
||||
, interactive = true
|
||||
;
|
||||
|
||||
//============================================================
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom,
|
||||
container = d3.select(this);
|
||||
|
||||
|
||||
//------------------------------------------------------------
|
||||
// Setup Scales
|
||||
|
||||
x .domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ))
|
||||
|
||||
if (padData)
|
||||
x.range(xRange || [availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
|
||||
else
|
||||
x.range(xRange || [0, availableWidth]);
|
||||
|
||||
y .domain(yDomain || d3.extent(data[0].values.map(getY).concat(forceY) ))
|
||||
.range(yRange || [availableHeight, 0]);
|
||||
|
||||
// If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
|
||||
|
||||
if (x.domain()[0] === x.domain()[1])
|
||||
x.domain()[0] ?
|
||||
x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
|
||||
: x.domain([-1,1]);
|
||||
|
||||
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([-1,1]);
|
||||
|
||||
//------------------------------------------------------------
|
||||
|
||||
|
||||
//------------------------------------------------------------
|
||||
// Setup containers and skeleton of chart
|
||||
|
||||
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');
|
||||
|
||||
gEnter.append('g').attr('class', 'nv-bars');
|
||||
|
||||
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
//------------------------------------------------------------
|
||||
|
||||
|
||||
container
|
||||
.on('click', function(d,i) {
|
||||
dispatch.chartClick({
|
||||
data: d,
|
||||
index: i,
|
||||
pos: d3.event,
|
||||
id: id
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
defsEnter.append('clipPath')
|
||||
.attr('id', 'nv-chart-clip-path-' + id)
|
||||
.append('rect');
|
||||
|
||||
wrap.select('#nv-chart-clip-path-' + id + ' rect')
|
||||
.attr('width', availableWidth)
|
||||
.attr('height', availableHeight);
|
||||
|
||||
g .attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');
|
||||
|
||||
|
||||
|
||||
var bars = wrap.select('.nv-bars').selectAll('.nv-bar')
|
||||
.data(function(d) { return d }, function(d,i) {return getX(d,i)});
|
||||
|
||||
bars.exit().remove();
|
||||
|
||||
|
||||
var barsEnter = bars.enter().append('rect')
|
||||
//.attr('class', function(d,i,j) { return (getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive') + ' nv-bar-' + j + '-' + i })
|
||||
.attr('x', 0 )
|
||||
.attr('y', function(d,i) { return nv.utils.NaNtoZero(y(Math.max(0, getY(d,i)))) })
|
||||
.attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.abs(y(getY(d,i)) - y(0))) })
|
||||
.attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; })
|
||||
.on('mouseover', function(d,i) {
|
||||
if (!interactive) return;
|
||||
d3.select(this).classed('hover', true);
|
||||
dispatch.elementMouseover({
|
||||
point: d,
|
||||
series: data[0],
|
||||
pos: [x(getX(d,i)), y(getY(d,i))], // TODO: Figure out why the value appears to be shifted
|
||||
pointIndex: i,
|
||||
seriesIndex: 0,
|
||||
e: d3.event
|
||||
});
|
||||
|
||||
})
|
||||
.on('mouseout', function(d,i) {
|
||||
if (!interactive) return;
|
||||
d3.select(this).classed('hover', false);
|
||||
dispatch.elementMouseout({
|
||||
point: d,
|
||||
series: data[0],
|
||||
pointIndex: i,
|
||||
seriesIndex: 0,
|
||||
e: d3.event
|
||||
});
|
||||
})
|
||||
.on('click', function(d,i) {
|
||||
if (!interactive) return;
|
||||
dispatch.elementClick({
|
||||
//label: d[label],
|
||||
value: getY(d,i),
|
||||
data: d,
|
||||
index: i,
|
||||
pos: [x(getX(d,i)), y(getY(d,i))],
|
||||
e: d3.event,
|
||||
id: id
|
||||
});
|
||||
d3.event.stopPropagation();
|
||||
})
|
||||
.on('dblclick', function(d,i) {
|
||||
if (!interactive) return;
|
||||
dispatch.elementDblClick({
|
||||
//label: d[label],
|
||||
value: getY(d,i),
|
||||
data: d,
|
||||
index: i,
|
||||
pos: [x(getX(d,i)), y(getY(d,i))],
|
||||
e: d3.event,
|
||||
id: id
|
||||
});
|
||||
d3.event.stopPropagation();
|
||||
});
|
||||
|
||||
bars
|
||||
.attr('fill', function(d,i) { return color(d, i); })
|
||||
.attr('class', function(d,i,j) { return (getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive') + ' nv-bar-' + j + '-' + i })
|
||||
.transition()
|
||||
.attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; })
|
||||
//TODO: better width calculations that don't assume always uniform data spacing;w
|
||||
.attr('width', (availableWidth / data[0].values.length) * .9 );
|
||||
|
||||
|
||||
bars.transition()
|
||||
.attr('y', function(d,i) {
|
||||
var rval = getY(d,i) < 0 ?
|
||||
y(0) :
|
||||
y(0) - y(getY(d,i)) < 1 ?
|
||||
y(0) - 1 :
|
||||
y(getY(d,i));
|
||||
return nv.utils.NaNtoZero(rval);
|
||||
})
|
||||
.attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.max(Math.abs(y(getY(d,i)) - y(0)),1)) });
|
||||
|
||||
});
|
||||
|
||||
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
|
||||
//------------------------------------------------------------
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
|
||||
chart.options = nv.utils.optionsFunc.bind(chart);
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) return getX;
|
||||
getX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) return getY;
|
||||
getY = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
|
||||
margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
|
||||
margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
|
||||
margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = _;
|
||||
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 = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yDomain = function(_) {
|
||||
if (!arguments.length) return yDomain;
|
||||
yDomain = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xRange = function(_) {
|
||||
if (!arguments.length) return xRange;
|
||||
xRange = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yRange = function(_) {
|
||||
if (!arguments.length) return yRange;
|
||||
yRange = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.forceX = function(_) {
|
||||
if (!arguments.length) return forceX;
|
||||
forceX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.forceY = function(_) {
|
||||
if (!arguments.length) return forceY;
|
||||
forceY = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.padData = function(_) {
|
||||
if (!arguments.length) return padData;
|
||||
padData = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.clipEdge = function(_) {
|
||||
if (!arguments.length) return clipEdge;
|
||||
clipEdge = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = nv.utils.getColor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.id = function(_) {
|
||||
if (!arguments.length) return id;
|
||||
id = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.interactive = function(_) {
|
||||
if(!arguments.length) return interactive;
|
||||
interactive = false;
|
||||
return chart;
|
||||
};
|
||||
|
||||
//============================================================
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
@ -3758,337 +4089,6 @@ nv.models.distribution = function() {
|
||||
//============================================================
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
//TODO: consider deprecating and using multibar with single series for this
|
||||
nv.models.historicalBar = function() {
|
||||
"use strict";
|
||||
//============================================================
|
||||
// Public Variables with Default Settings
|
||||
//------------------------------------------------------------
|
||||
|
||||
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.linear()
|
||||
, y = d3.scale.linear()
|
||||
, getX = function(d) { return d.x }
|
||||
, getY = function(d) { return d.y }
|
||||
, forceX = []
|
||||
, forceY = [0]
|
||||
, padData = false
|
||||
, clipEdge = true
|
||||
, color = nv.utils.defaultColor()
|
||||
, xDomain
|
||||
, yDomain
|
||||
, xRange
|
||||
, yRange
|
||||
, dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
|
||||
, interactive = true
|
||||
;
|
||||
|
||||
//============================================================
|
||||
|
||||
|
||||
function chart(selection) {
|
||||
selection.each(function(data) {
|
||||
var availableWidth = width - margin.left - margin.right,
|
||||
availableHeight = height - margin.top - margin.bottom,
|
||||
container = d3.select(this);
|
||||
|
||||
|
||||
//------------------------------------------------------------
|
||||
// Setup Scales
|
||||
|
||||
x .domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ))
|
||||
|
||||
if (padData)
|
||||
x.range(xRange || [availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
|
||||
else
|
||||
x.range(xRange || [0, availableWidth]);
|
||||
|
||||
y .domain(yDomain || d3.extent(data[0].values.map(getY).concat(forceY) ))
|
||||
.range(yRange || [availableHeight, 0]);
|
||||
|
||||
// If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
|
||||
|
||||
if (x.domain()[0] === x.domain()[1])
|
||||
x.domain()[0] ?
|
||||
x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
|
||||
: x.domain([-1,1]);
|
||||
|
||||
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([-1,1]);
|
||||
|
||||
//------------------------------------------------------------
|
||||
|
||||
|
||||
//------------------------------------------------------------
|
||||
// Setup containers and skeleton of chart
|
||||
|
||||
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');
|
||||
|
||||
gEnter.append('g').attr('class', 'nv-bars');
|
||||
|
||||
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
//------------------------------------------------------------
|
||||
|
||||
|
||||
container
|
||||
.on('click', function(d,i) {
|
||||
dispatch.chartClick({
|
||||
data: d,
|
||||
index: i,
|
||||
pos: d3.event,
|
||||
id: id
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
defsEnter.append('clipPath')
|
||||
.attr('id', 'nv-chart-clip-path-' + id)
|
||||
.append('rect');
|
||||
|
||||
wrap.select('#nv-chart-clip-path-' + id + ' rect')
|
||||
.attr('width', availableWidth)
|
||||
.attr('height', availableHeight);
|
||||
|
||||
g .attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');
|
||||
|
||||
|
||||
|
||||
var bars = wrap.select('.nv-bars').selectAll('.nv-bar')
|
||||
.data(function(d) { return d }, function(d,i) {return getX(d,i)});
|
||||
|
||||
bars.exit().remove();
|
||||
|
||||
|
||||
var barsEnter = bars.enter().append('rect')
|
||||
//.attr('class', function(d,i,j) { return (getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive') + ' nv-bar-' + j + '-' + i })
|
||||
.attr('x', 0 )
|
||||
.attr('y', function(d,i) { return nv.utils.NaNtoZero(y(Math.max(0, getY(d,i)))) })
|
||||
.attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.abs(y(getY(d,i)) - y(0))) })
|
||||
.attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; })
|
||||
.on('mouseover', function(d,i) {
|
||||
if (!interactive) return;
|
||||
d3.select(this).classed('hover', true);
|
||||
dispatch.elementMouseover({
|
||||
point: d,
|
||||
series: data[0],
|
||||
pos: [x(getX(d,i)), y(getY(d,i))], // TODO: Figure out why the value appears to be shifted
|
||||
pointIndex: i,
|
||||
seriesIndex: 0,
|
||||
e: d3.event
|
||||
});
|
||||
|
||||
})
|
||||
.on('mouseout', function(d,i) {
|
||||
if (!interactive) return;
|
||||
d3.select(this).classed('hover', false);
|
||||
dispatch.elementMouseout({
|
||||
point: d,
|
||||
series: data[0],
|
||||
pointIndex: i,
|
||||
seriesIndex: 0,
|
||||
e: d3.event
|
||||
});
|
||||
})
|
||||
.on('click', function(d,i) {
|
||||
if (!interactive) return;
|
||||
dispatch.elementClick({
|
||||
//label: d[label],
|
||||
value: getY(d,i),
|
||||
data: d,
|
||||
index: i,
|
||||
pos: [x(getX(d,i)), y(getY(d,i))],
|
||||
e: d3.event,
|
||||
id: id
|
||||
});
|
||||
d3.event.stopPropagation();
|
||||
})
|
||||
.on('dblclick', function(d,i) {
|
||||
if (!interactive) return;
|
||||
dispatch.elementDblClick({
|
||||
//label: d[label],
|
||||
value: getY(d,i),
|
||||
data: d,
|
||||
index: i,
|
||||
pos: [x(getX(d,i)), y(getY(d,i))],
|
||||
e: d3.event,
|
||||
id: id
|
||||
});
|
||||
d3.event.stopPropagation();
|
||||
});
|
||||
|
||||
bars
|
||||
.attr('fill', function(d,i) { return color(d, i); })
|
||||
.attr('class', function(d,i,j) { return (getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive') + ' nv-bar-' + j + '-' + i })
|
||||
.transition()
|
||||
.attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; })
|
||||
//TODO: better width calculations that don't assume always uniform data spacing;w
|
||||
.attr('width', (availableWidth / data[0].values.length) * .9 );
|
||||
|
||||
|
||||
bars.transition()
|
||||
.attr('y', function(d,i) {
|
||||
var rval = getY(d,i) < 0 ?
|
||||
y(0) :
|
||||
y(0) - y(getY(d,i)) < 1 ?
|
||||
y(0) - 1 :
|
||||
y(getY(d,i));
|
||||
return nv.utils.NaNtoZero(rval);
|
||||
})
|
||||
.attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.max(Math.abs(y(getY(d,i)) - y(0)),1)) });
|
||||
|
||||
});
|
||||
|
||||
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
|
||||
//------------------------------------------------------------
|
||||
|
||||
chart.dispatch = dispatch;
|
||||
|
||||
chart.options = nv.utils.optionsFunc.bind(chart);
|
||||
|
||||
chart.x = function(_) {
|
||||
if (!arguments.length) return getX;
|
||||
getX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.y = function(_) {
|
||||
if (!arguments.length) return getY;
|
||||
getY = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.margin = function(_) {
|
||||
if (!arguments.length) return margin;
|
||||
margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
|
||||
margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
|
||||
margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
|
||||
margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.width = function(_) {
|
||||
if (!arguments.length) return width;
|
||||
width = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.height = function(_) {
|
||||
if (!arguments.length) return height;
|
||||
height = _;
|
||||
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 = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yDomain = function(_) {
|
||||
if (!arguments.length) return yDomain;
|
||||
yDomain = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xRange = function(_) {
|
||||
if (!arguments.length) return xRange;
|
||||
xRange = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yRange = function(_) {
|
||||
if (!arguments.length) return yRange;
|
||||
yRange = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.forceX = function(_) {
|
||||
if (!arguments.length) return forceX;
|
||||
forceX = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.forceY = function(_) {
|
||||
if (!arguments.length) return forceY;
|
||||
forceY = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.padData = function(_) {
|
||||
if (!arguments.length) return padData;
|
||||
padData = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.clipEdge = function(_) {
|
||||
if (!arguments.length) return clipEdge;
|
||||
clipEdge = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.color = function(_) {
|
||||
if (!arguments.length) return color;
|
||||
color = nv.utils.getColor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.id = function(_) {
|
||||
if (!arguments.length) return id;
|
||||
id = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.interactive = function(_) {
|
||||
if(!arguments.length) return interactive;
|
||||
interactive = false;
|
||||
return chart;
|
||||
};
|
||||
|
||||
//============================================================
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
@ -10245,9 +10245,11 @@ nv.models.pie = function() {
|
||||
var g = wrap.select('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'nv-pie');
|
||||
gEnter.append('g').attr('class', 'nv-pieLabels');
|
||||
|
||||
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
g.select('.nv-pie').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
|
||||
g.select('.nv-pieLabels').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
|
||||
|
||||
//------------------------------------------------------------
|
||||
|
||||
@ -10278,7 +10280,11 @@ nv.models.pie = function() {
|
||||
var slices = wrap.select('.nv-pie').selectAll('.nv-slice')
|
||||
.data(pie);
|
||||
|
||||
var pieLabels = wrap.select('.nv-pieLabels').selectAll('.nv-label')
|
||||
.data(pie);
|
||||
|
||||
slices.exit().remove();
|
||||
pieLabels.exit().remove();
|
||||
|
||||
var ae = slices.enter().append('g')
|
||||
.attr('class', 'nv-slice')
|
||||
@ -10342,71 +10348,65 @@ nv.models.pie = function() {
|
||||
if (showLabels) {
|
||||
// This does the normal label
|
||||
var labelsArc = d3.svg.arc().innerRadius(0);
|
||||
|
||||
|
||||
if (pieLabelsOutside){ labelsArc = arc; }
|
||||
|
||||
if (donutLabelsOutside) { labelsArc = d3.svg.arc().outerRadius(arc.outerRadius()); }
|
||||
|
||||
ae.append("g").classed("nv-label", true)
|
||||
.each(function(d, i) {
|
||||
var group = d3.select(this);
|
||||
pieLabels.enter().append("g").classed("nv-label",true)
|
||||
.each(function(d,i) {
|
||||
var group = d3.select(this);
|
||||
|
||||
group
|
||||
.attr('transform', function(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;
|
||||
group
|
||||
.attr('transform', function(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 {
|
||||
rotateAngle += 90;
|
||||
d.outerRadius = radius + 10; // Set Outer Coordinate
|
||||
d.innerRadius = radius + 15; // Set Inner Coordinate
|
||||
return 'translate(' + labelsArc.centroid(d) + ')'
|
||||
}
|
||||
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')
|
||||
.style('stroke', '#fff')
|
||||
.style('fill', '#fff')
|
||||
.attr("rx", 3)
|
||||
.attr("ry", 3);
|
||||
group.append('rect')
|
||||
.style('stroke', '#fff')
|
||||
.style('fill', '#fff')
|
||||
.attr("rx", 3)
|
||||
.attr("ry", 3);
|
||||
|
||||
group.append('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
|
||||
.style('fill', '#000')
|
||||
group.append('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
|
||||
.style('fill', '#000')
|
||||
|
||||
|
||||
});
|
||||
|
||||
slices.select(".nv-label").transition()
|
||||
.attr('transform', function(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) {
|
||||
var slice = d3.select(this);
|
||||
|
||||
slice
|
||||
.select(".nv-label text")
|
||||
pieLabels.transition()
|
||||
.attr('transform', function(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) + ')'
|
||||
}
|
||||
});
|
||||
pieLabels.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);
|
||||
@ -10417,15 +10417,6 @@ nv.models.pie = function() {
|
||||
};
|
||||
return (d.value && percent > labelThreshold) ? labelTypes[labelType] : '';
|
||||
});
|
||||
|
||||
var textBox = slice.select('text').node().getBBox();
|
||||
slice.select(".nv-label rect")
|
||||
.attr("width", textBox.width + 10)
|
||||
.attr("height", textBox.height + 10)
|
||||
.attr("transform", function() {
|
||||
return "translate(" + [textBox.x - 5, textBox.y - 5] + ")";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -10504,7 +10495,7 @@ nv.models.pie = function() {
|
||||
getY = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
chart.description = function(_) {
|
||||
if (!arguments.length) return getDescription;
|
||||
getDescription = _;
|
||||
@ -10516,7 +10507,7 @@ nv.models.pie = function() {
|
||||
showLabels = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
chart.labelSunbeamLayout = function(_) {
|
||||
if (!arguments.length) return labelSunbeamLayout;
|
||||
labelSunbeamLayout = _;
|
||||
@ -10528,7 +10519,7 @@ nv.models.pie = function() {
|
||||
donutLabelsOutside = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
chart.pieLabelsOutside = function(_) {
|
||||
if (!arguments.length) return pieLabelsOutside;
|
||||
pieLabelsOutside = _;
|
||||
@ -10547,7 +10538,7 @@ nv.models.pie = function() {
|
||||
donut = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
chart.donutRatio = function(_) {
|
||||
if (!arguments.length) return donutRatio;
|
||||
donutRatio = _;
|
||||
|
||||
@ -48,9 +48,11 @@ nv.models.pie = function() {
|
||||
var g = wrap.select('g');
|
||||
|
||||
gEnter.append('g').attr('class', 'nv-pie');
|
||||
gEnter.append('g').attr('class', 'nv-pieLabels');
|
||||
|
||||
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
g.select('.nv-pie').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
|
||||
g.select('.nv-pieLabels').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
|
||||
|
||||
//------------------------------------------------------------
|
||||
|
||||
@ -81,7 +83,11 @@ nv.models.pie = function() {
|
||||
var slices = wrap.select('.nv-pie').selectAll('.nv-slice')
|
||||
.data(pie);
|
||||
|
||||
var pieLabels = wrap.select('.nv-pieLabels').selectAll('.nv-label')
|
||||
.data(pie);
|
||||
|
||||
slices.exit().remove();
|
||||
pieLabels.exit().remove();
|
||||
|
||||
var ae = slices.enter().append('g')
|
||||
.attr('class', 'nv-slice')
|
||||
@ -145,71 +151,65 @@ nv.models.pie = function() {
|
||||
if (showLabels) {
|
||||
// This does the normal label
|
||||
var labelsArc = d3.svg.arc().innerRadius(0);
|
||||
|
||||
|
||||
if (pieLabelsOutside){ labelsArc = arc; }
|
||||
|
||||
if (donutLabelsOutside) { labelsArc = d3.svg.arc().outerRadius(arc.outerRadius()); }
|
||||
|
||||
ae.append("g").classed("nv-label", true)
|
||||
.each(function(d, i) {
|
||||
var group = d3.select(this);
|
||||
pieLabels.enter().append("g").classed("nv-label",true)
|
||||
.each(function(d,i) {
|
||||
var group = d3.select(this);
|
||||
|
||||
group
|
||||
.attr('transform', function(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;
|
||||
group
|
||||
.attr('transform', function(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 {
|
||||
rotateAngle += 90;
|
||||
d.outerRadius = radius + 10; // Set Outer Coordinate
|
||||
d.innerRadius = radius + 15; // Set Inner Coordinate
|
||||
return 'translate(' + labelsArc.centroid(d) + ')'
|
||||
}
|
||||
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')
|
||||
.style('stroke', '#fff')
|
||||
.style('fill', '#fff')
|
||||
.attr("rx", 3)
|
||||
.attr("ry", 3);
|
||||
group.append('rect')
|
||||
.style('stroke', '#fff')
|
||||
.style('fill', '#fff')
|
||||
.attr("rx", 3)
|
||||
.attr("ry", 3);
|
||||
|
||||
group.append('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
|
||||
.style('fill', '#000')
|
||||
group.append('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
|
||||
.style('fill', '#000')
|
||||
|
||||
|
||||
});
|
||||
|
||||
slices.select(".nv-label").transition()
|
||||
.attr('transform', function(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) {
|
||||
var slice = d3.select(this);
|
||||
|
||||
slice
|
||||
.select(".nv-label text")
|
||||
pieLabels.transition()
|
||||
.attr('transform', function(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) + ')'
|
||||
}
|
||||
});
|
||||
pieLabels.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);
|
||||
@ -220,15 +220,6 @@ nv.models.pie = function() {
|
||||
};
|
||||
return (d.value && percent > labelThreshold) ? labelTypes[labelType] : '';
|
||||
});
|
||||
|
||||
var textBox = slice.select('text').node().getBBox();
|
||||
slice.select(".nv-label rect")
|
||||
.attr("width", textBox.width + 10)
|
||||
.attr("height", textBox.height + 10)
|
||||
.attr("transform", function() {
|
||||
return "translate(" + [textBox.x - 5, textBox.y - 5] + ")";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -307,7 +298,7 @@ nv.models.pie = function() {
|
||||
getY = d3.functor(_);
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
chart.description = function(_) {
|
||||
if (!arguments.length) return getDescription;
|
||||
getDescription = _;
|
||||
@ -319,7 +310,7 @@ nv.models.pie = function() {
|
||||
showLabels = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
chart.labelSunbeamLayout = function(_) {
|
||||
if (!arguments.length) return labelSunbeamLayout;
|
||||
labelSunbeamLayout = _;
|
||||
@ -331,7 +322,7 @@ nv.models.pie = function() {
|
||||
donutLabelsOutside = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
chart.pieLabelsOutside = function(_) {
|
||||
if (!arguments.length) return pieLabelsOutside;
|
||||
pieLabelsOutside = _;
|
||||
@ -350,7 +341,7 @@ nv.models.pie = function() {
|
||||
donut = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
chart.donutRatio = function(_) {
|
||||
if (!arguments.length) return donutRatio;
|
||||
donutRatio = _;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user