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

Cleaned up the pie implementation a little more, and moved the old pie to deprecated. Will be making pieChart.js shortly that will have an optional legend and tooltips built in.

Browse Source
master-patched
Bob Monteverde 12 years ago
parent 59072dde9b
commit f5db7e43a8
6 changed files with 466 additions and 522 deletions
Show Stats Download Patch File Download Diff File

263
deprecated/pie.js
Unescape Escape View File

@ -0,0 +1,263 @@
nv.models.pie = function() {
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 500,
height = 500,
animate = 2000,
radius = Math.min(width-(margin.right+margin.left), height-(margin.top+margin.bottom)) / 2,
label ='label',
field ='y',
id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one
color = d3.scale.category20(),
showLabels = true,
donut = false,
title = '';
var lastWidth = 0,
lastHeight = 0;
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
function chart(selection) {
selection.each(function(data) {
var svg = d3.select(this)
.on("click", function(d,i) {
dispatch.chartClick({
data: d,
index: i,
pos: d3.event,
id: id
});
});
var background = svg.selectAll('svg.margin').data([data]);
var parent = background.enter();
parent.append("text")
.attr("class", "title")
.attr("dy", ".91em")
.attr("text-anchor", "start")
.text(title);
parent.append('svg')
.attr('class','margin')
.attr('x', margin.left)
.attr('y', margin.top)
.style('overflow','visible');
var wrap = background.selectAll('g.wrap').data([data]);
wrap.exit().remove();
var wEnter = wrap.enter();
wEnter
.append('g')
.attr('class', 'wrap')
.attr('id','wrap-'+id)
.append('g')
.attr('class', 'pie');
wrap
.attr('width', width) //-(margin.left+margin.right))
.attr('height', height) //-(margin.top+margin.bottom))
.attr("transform", "translate(" + radius + "," + radius + ")");
var arc = d3.svg.arc()
.outerRadius((radius-(radius / 5)));
if (donut) arc.innerRadius(radius / 2);
// Setup the Pie chart and choose the data element
var pie = d3.layout.pie()
.value(function (d) { return d[field]; });
var slices = background.select('.pie').selectAll(".slice")
.data(pie);
slices.exit().remove();
var ae = slices.enter().append("svg:g")
.attr("class", "slice")
.on('mouseover', function(d,i){
d3.select(this).classed('hover', true);
dispatch.tooltipShow({
label: d.data[label],
value: d.data[field],
data: d.data,
index: i,
pos: [d3.event.pageX, d3.event.pageY],
id: id
});
})
.on('mouseout', function(d,i){
d3.select(this).classed('hover', false);
dispatch.tooltipHide({
label: d.data[label],
value: d.data[field],
data: d.data,
index: i,
id: id
});
})
.on('click', function(d,i) {
dispatch.elementClick({
label: d.data[label],
value: d.data[field],
data: d.data,
index: i,
pos: d3.event,
id: id
});
d3.event.stopPropagation();
})
.on('dblclick', function(d,i) {
dispatch.elementDblClick({
label: d.data[label],
value: d.data[field],
data: d.data,
index: i,
pos: d3.event,
id: id
});
d3.event.stopPropagation();
});
var paths = ae.append("svg:path")
.attr('class','path')
.attr("fill", function(d, i) { return color(i); });
//.attr('d', arc);
slices.select('.path')
.attr('d', arc)
.transition()
.ease("bounce")
.duration(animate)
.attrTween("d", tweenPie);
if (showLabels) {
// This does the normal label
ae.append("text");
slices.select("text")
.transition()
.duration(animate)
.ease('bounce')
.attr("transform", function(d) {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle") //center the text on it's origin
.style("font", "bold 12px Arial")
.text(function(d, i) { return d.data[label]; });
}
// Computes the angle of an arc, converting from radians to degrees.
function angle(d) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
return a > 90 ? a - 180 : a;
}
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) {
return arc(i(t));
};
}
});
return chart;
}
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
if (margin.left + margin.right + 20 > _) {
width = margin.left + margin.right + 20; // Min width
} else {
width = _;
}
radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
if (margin.top + margin.bottom + 20 > _) {
height = margin.top + margin.bottom + 20; // Min height
} else {
height = _;
}
radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
return chart;
};
chart.animate = function(_) {
if (!arguments.length) return animate;
animate = _;
return chart;
};
chart.labelField = function(_) {
if (!arguments.length) return (label);
label = _;
return chart;
};
chart.dataField = function(_) {
if (!arguments.length) return (field);
field = _;
return chart;
};
chart.showLabels = function(_) {
if (!arguments.length) return (showLabels);
showLabels = _;
return chart;
};
chart.donut = function(_) {
if (!arguments.length) return (donut);
donut = _;
return chart;
};
chart.title = function(_) {
if (!arguments.length) return (title);
title = _;
return chart;
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;
return chart;
};
chart.dispatch = dispatch;
return chart;
}

1
examples/pie.html
Unescape Escape View File

@ -153,6 +153,7 @@ nv.addGraph({
height = nv.utils.windowSize().height - 40; height = nv.utils.windowSize().height - 40;
d3.select("#test1") d3.select("#test1")
.transition().duration(0)
.attr('width', width) .attr('width', width)
.attr('height', height) .attr('height', height)
.call( .call(

256
nv.d3.js
Unescape Escape View File

@ -145,9 +145,10 @@ d3.time.monthEnds = d3_time_range(d3.time.monthEnd, function(date) {
var body = document.getElementsByTagName("body")[0]; var body = document.getElementsByTagName("body")[0];
container.innerHTML = content; container.innerHTML = content;
container.style.left = 1; container.style.left = 0;
container.style.top = 1; container.style.top = 0;
container.style.opacity = 0; container.style.opacity = 0;
body.appendChild(container); body.appendChild(container);
var height = parseInt(container.offsetHeight), var height = parseInt(container.offsetHeight),
@ -194,6 +195,8 @@ d3.time.monthEnds = d3_time_range(d3.time.monthEnd, function(date) {
container.style.left = left+"px"; container.style.left = left+"px";
container.style.top = top+"px"; container.style.top = top+"px";
container.style.opacity = 1; container.style.opacity = 1;
container.style.position = "absolute"; //fix scroll bar issue
container.style.pointerEvents = "none"; //fix scroll bar issue
return container; return container;
}; };
@ -4736,27 +4739,23 @@ nv.models.pie = function() {
var margin = {top: 20, right: 20, bottom: 20, left: 20}, var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 500, width = 500,
height = 500, height = 500,
animate = 2000, getLabel = function(d) { return d.label },
radius = Math.min(width-(margin.right+margin.left), height-(margin.top+margin.bottom)) / 2, getY = function(d) { return d.y },
label ='label',
field ='y',
id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one
color = d3.scale.category20(), color = d3.scale.category20(),
showLabels = true, showLabels = true,
donut = false, donut = false;
title = '';
var lastWidth = 0,
lastHeight = 0;
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide'); var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
function chart(selection) { function chart(selection) {
selection.each(function(data) { selection.each(function(data) {
var availableWidth = width - margin.left - margin.right,
availableHeight = height - margin.top - margin.bottom,
radius = Math.min(availableWidth, availableHeight) / 2;
var svg = d3.select(this) var container = d3.select(this)
.on("click", function(d,i) { .on('click', function(d,i) {
dispatch.chartClick({ dispatch.chartClick({
data: d, data: d,
index: i, index: i,
@ -4767,157 +4766,131 @@ nv.models.pie = function() {
var background = svg.selectAll('svg.margin').data([data]); var wrap = container.selectAll('.wrap.pie').data([data]);
var parent = background.enter(); var wrapEnter = wrap.enter().append('g').attr('class','wrap nvd3 pie chart-' + id);
parent.append("text") var gEnter = wrapEnter.append('g');
.attr("class", "title") var g = wrap.select('g')
.attr("dy", ".91em")
.attr("text-anchor", "start")
.text(title);
parent.append('svg')
.attr('class','margin')
.attr('x', margin.left)
.attr('y', margin.top)
.style('overflow','visible');
var wrap = background.selectAll('g.wrap').data([data]);
wrap.exit().remove();
var wEnter = wrap.enter();
wEnter
.append('g')
.attr('class', 'wrap')
.attr('id','wrap-'+id)
.append('g')
.attr('class', 'pie');
gEnter.append('g').attr('class', 'pie');
wrap wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
.attr('width', width) //-(margin.left+margin.right))
.attr('height', height) //-(margin.top+margin.bottom))
.attr("transform", "translate(" + radius + "," + radius + ")");
g.select('.pie').attr('transform', 'translate(' + radius + ',' + radius + ')');
var arc = d3.svg.arc() var arc = d3.svg.arc()
.outerRadius((radius-(radius / 5))); .outerRadius((radius-(radius / 5)));
if (donut) arc.innerRadius(radius / 2); if (donut) arc.innerRadius(radius / 2);
// Setup the Pie chart and choose the data element // Setup the Pie chart and choose the data element
var pie = d3.layout.pie() var pie = d3.layout.pie()
.value(function (d) { return d[field]; }); .value(getY);
var slices = background.select('.pie').selectAll(".slice") var slices = wrap.select('.pie').selectAll('.slice')
.data(pie); .data(pie);
slices.exit().remove(); slices.exit().remove();
var ae = slices.enter().append("svg:g") var ae = slices.enter().append('svg:g')
.attr("class", "slice") .attr('class', 'slice')
.on('mouseover', function(d,i){ .on('mouseover', function(d,i){
d3.select(this).classed('hover', true); d3.select(this).classed('hover', true);
dispatch.tooltipShow({ dispatch.tooltipShow({
label: d.data[label], label: getLabel(d.data),
value: d.data[field], value: getY(d.data),
data: d.data, data: d.data,
index: i, index: i,
pos: [d3.event.pageX, d3.event.pageY], pos: [d3.event.pageX, d3.event.pageY],
id: id id: id
}); });
}) })
.on('mouseout', function(d,i){ .on('mouseout', function(d,i){
d3.select(this).classed('hover', false); d3.select(this).classed('hover', false);
dispatch.tooltipHide({ dispatch.tooltipHide({
label: d.data[label], label: getLabel(d.data),
value: d.data[field], value: getY(d.data),
data: d.data, data: d.data,
index: i, index: i,
id: id id: id
}); });
}) })
.on('click', function(d,i) { .on('click', function(d,i) {
dispatch.elementClick({ console.log(d);
label: d.data[label], dispatch.elementClick({
value: d.data[field], label: getLabel(d.data),
data: d.data, value: getY(d.data),
index: i, data: d.data,
pos: d3.event, index: i,
id: id pos: d3.event,
}); id: id
d3.event.stopPropagation(); });
d3.event.stopPropagation();
}) })
.on('dblclick', function(d,i) { .on('dblclick', function(d,i) {
dispatch.elementDblClick({ dispatch.elementDblClick({
label: d.data[label], label: getLabel(d.data),
value: d.data[field], value: getY(d.data),
data: d.data, data: d.data,
index: i, index: i,
pos: d3.event, pos: d3.event,
id: id id: id
}); });
d3.event.stopPropagation(); d3.event.stopPropagation();
}); });
var paths = ae.append("svg:path") var paths = ae.append('svg:path')
.attr('class','path') .attr('class','path')
.attr("fill", function(d, i) { return color(i); }); .attr('fill', function(d, i) { return color(i); });
//.attr('d', arc); //.attr('d', arc);
slices.select('.path') d3.transition(slices.select('.path'))
.attr('d', arc) .attr('d', arc)
.transition() //.ease('bounce')
.ease("bounce") .attrTween('d', tweenPie);
.duration(animate)
.attrTween("d", tweenPie);
if (showLabels) { if (showLabels) {
// This does the normal label // This does the normal label
ae.append("text"); ae.append('text');
slices.select("text") d3.transition(slices.select('text'))
.transition() //.ease('bounce')
.duration(animate) .attr('transform', function(d) {
.ease('bounce')
.attr("transform", function(d) {
d.outerRadius = radius + 10; // Set Outer Coordinate d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate d.innerRadius = radius + 15; // Set Inner Coordinate
return "translate(" + arc.centroid(d) + ")"; return 'translate(' + arc.centroid(d) + ')';
}) })
.attr("text-anchor", "middle") //center the text on it's origin .attr('text-anchor', 'middle') //center the text on it's origin
.style("font", "bold 12px Arial") //.style('font', 'bold 12px Arial') // font style's should be set in css!
.text(function(d, i) { return d.data[label]; }); .text(function(d, i) { return getLabel(d.data); });
} }
// Computes the angle of an arc, converting from radians to degrees. // Computes the angle of an arc, converting from radians to degrees.
function angle(d) { function angle(d) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90; var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
return a > 90 ? a - 180 : a; return a > 90 ? a - 180 : a;
} }
function tweenPie(b) { function tweenPie(b) {
b.innerRadius = 0; b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b); var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) { return function(t) {
return arc(i(t)); return arc(i(t));
}; };
} }
}); });
return chart; return chart;
} }
chart.dispatch = dispatch;
chart.margin = function(_) { chart.margin = function(_) {
if (!arguments.length) return margin; if (!arguments.length) return margin;
margin = _; margin = _;
@ -4926,73 +4899,48 @@ nv.models.pie = function() {
chart.width = function(_) { chart.width = function(_) {
if (!arguments.length) return width; if (!arguments.length) return width;
if (margin.left + margin.right + 20 > _) { width = _;
width = margin.left + margin.right + 20; // Min width
} else {
width = _;
}
radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
return chart; return chart;
}; };
chart.height = function(_) { chart.height = function(_) {
if (!arguments.length) return height; if (!arguments.length) return height;
if (margin.top + margin.bottom + 20 > _) { height = _;
height = margin.top + margin.bottom + 20; // Min height
} else {
height = _;
}
radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
return chart; return chart;
}; };
chart.animate = function(_) { chart.y = function(_) {
if (!arguments.length) return animate; if (!arguments.length) return getY;
animate = _; getY = d3.functor(_);
return chart; return chart;
}; };
chart.labelField = function(_) { chart.label = function(_) {
if (!arguments.length) return (label); if (!arguments.length) return getLabel;
label = _; getLabel = _;
return chart;
};
chart.dataField = function(_) {
if (!arguments.length) return (field);
field = _;
return chart; return chart;
}; };
chart.showLabels = function(_) { chart.showLabels = function(_) {
if (!arguments.length) return (showLabels); if (!arguments.length) return showLabels;
showLabels = _; showLabels = _;
return chart; return chart;
}; };
chart.donut = function(_) { chart.donut = function(_) {
if (!arguments.length) return (donut); if (!arguments.length) return donut;
donut = _; donut = _;
return chart; return chart;
};
chart.title = function(_) {
if (!arguments.length) return (title);
title = _;
return chart;
}; };
chart.id = function(_) { chart.id = function(_) {
if (!arguments.length) return id; if (!arguments.length) return id;
id = _; id = _;
return chart; return chart;
}; };
chart.dispatch = dispatch;
return chart; return chart;
} }
nv.models.scatter = function() { nv.models.scatter = function() {

6
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

249
src/models/pie.js
Unescape Escape View File

@ -3,27 +3,23 @@ nv.models.pie = function() {
var margin = {top: 20, right: 20, bottom: 20, left: 20}, var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 500, width = 500,
height = 500, height = 500,
animate = 2000, getLabel = function(d) { return d.label },
radius = Math.min(width-(margin.right+margin.left), height-(margin.top+margin.bottom)) / 2, getY = function(d) { return d.y },
label ='label',
field ='y',
id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one
color = d3.scale.category20(), color = d3.scale.category20(),
showLabels = true, showLabels = true,
donut = false, donut = false;
title = '';
var lastWidth = 0,
lastHeight = 0;
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide'); var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
function chart(selection) { function chart(selection) {
selection.each(function(data) { selection.each(function(data) {
var availableWidth = width - margin.left - margin.right,
availableHeight = height - margin.top - margin.bottom,
radius = Math.min(availableWidth, availableHeight) / 2;
var svg = d3.select(this) var container = d3.select(this)
.on("click", function(d,i) { .on('click', function(d,i) {
dispatch.chartClick({ dispatch.chartClick({
data: d, data: d,
index: i, index: i,
@ -34,157 +30,131 @@ nv.models.pie = function() {
var background = svg.selectAll('svg.margin').data([data]); var wrap = container.selectAll('.wrap.pie').data([data]);
var parent = background.enter(); var wrapEnter = wrap.enter().append('g').attr('class','wrap nvd3 pie chart-' + id);
parent.append("text") var gEnter = wrapEnter.append('g');
.attr("class", "title") var g = wrap.select('g')
.attr("dy", ".91em")
.attr("text-anchor", "start")
.text(title);
parent.append('svg')
.attr('class','margin')
.attr('x', margin.left)
.attr('y', margin.top)
.style('overflow','visible');
var wrap = background.selectAll('g.wrap').data([data]);
wrap.exit().remove();
var wEnter = wrap.enter();
wEnter
.append('g')
.attr('class', 'wrap')
.attr('id','wrap-'+id)
.append('g')
.attr('class', 'pie');
gEnter.append('g').attr('class', 'pie');
wrap wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
.attr('width', width) //-(margin.left+margin.right))
.attr('height', height) //-(margin.top+margin.bottom))
.attr("transform", "translate(" + radius + "," + radius + ")");
g.select('.pie').attr('transform', 'translate(' + radius + ',' + radius + ')');
var arc = d3.svg.arc() var arc = d3.svg.arc()
.outerRadius((radius-(radius / 5))); .outerRadius((radius-(radius / 5)));
if (donut) arc.innerRadius(radius / 2); if (donut) arc.innerRadius(radius / 2);
// Setup the Pie chart and choose the data element // Setup the Pie chart and choose the data element
var pie = d3.layout.pie() var pie = d3.layout.pie()
.value(function (d) { return d[field]; }); .value(getY);
var slices = background.select('.pie').selectAll(".slice") var slices = wrap.select('.pie').selectAll('.slice')
.data(pie); .data(pie);
slices.exit().remove(); slices.exit().remove();
var ae = slices.enter().append("svg:g") var ae = slices.enter().append('svg:g')
.attr("class", "slice") .attr('class', 'slice')
.on('mouseover', function(d,i){ .on('mouseover', function(d,i){
d3.select(this).classed('hover', true); d3.select(this).classed('hover', true);
dispatch.tooltipShow({ dispatch.tooltipShow({
label: d.data[label], label: getLabel(d.data),
value: d.data[field], value: getY(d.data),
data: d.data, data: d.data,
index: i, index: i,
pos: [d3.event.pageX, d3.event.pageY], pos: [d3.event.pageX, d3.event.pageY],
id: id id: id
}); });
}) })
.on('mouseout', function(d,i){ .on('mouseout', function(d,i){
d3.select(this).classed('hover', false); d3.select(this).classed('hover', false);
dispatch.tooltipHide({ dispatch.tooltipHide({
label: d.data[label], label: getLabel(d.data),
value: d.data[field], value: getY(d.data),
data: d.data, data: d.data,
index: i, index: i,
id: id id: id
}); });
}) })
.on('click', function(d,i) { .on('click', function(d,i) {
dispatch.elementClick({ console.log(d);
label: d.data[label], dispatch.elementClick({
value: d.data[field], label: getLabel(d.data),
data: d.data, value: getY(d.data),
index: i, data: d.data,
pos: d3.event, index: i,
id: id pos: d3.event,
}); id: id
d3.event.stopPropagation(); });
d3.event.stopPropagation();
}) })
.on('dblclick', function(d,i) { .on('dblclick', function(d,i) {
dispatch.elementDblClick({ dispatch.elementDblClick({
label: d.data[label], label: getLabel(d.data),
value: d.data[field], value: getY(d.data),
data: d.data, data: d.data,
index: i, index: i,
pos: d3.event, pos: d3.event,
id: id id: id
}); });
d3.event.stopPropagation(); d3.event.stopPropagation();
}); });
var paths = ae.append("svg:path") var paths = ae.append('svg:path')
.attr('class','path') .attr('class','path')
.attr("fill", function(d, i) { return color(i); }); .attr('fill', function(d, i) { return color(i); });
//.attr('d', arc); //.attr('d', arc);
slices.select('.path') d3.transition(slices.select('.path'))
.attr('d', arc) .attr('d', arc)
.transition() //.ease('bounce')
.ease("bounce") .attrTween('d', tweenPie);
.duration(animate)
.attrTween("d", tweenPie);
if (showLabels) { if (showLabels) {
// This does the normal label // This does the normal label
ae.append("text"); ae.append('text');
slices.select("text") d3.transition(slices.select('text'))
.transition() //.ease('bounce')
.duration(animate) .attr('transform', function(d) {
.ease('bounce')
.attr("transform", function(d) {
d.outerRadius = radius + 10; // Set Outer Coordinate d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate d.innerRadius = radius + 15; // Set Inner Coordinate
return "translate(" + arc.centroid(d) + ")"; return 'translate(' + arc.centroid(d) + ')';
}) })
.attr("text-anchor", "middle") //center the text on it's origin .attr('text-anchor', 'middle') //center the text on it's origin
.style("font", "bold 12px Arial") //.style('font', 'bold 12px Arial') // font style's should be set in css!
.text(function(d, i) { return d.data[label]; }); .text(function(d, i) { return getLabel(d.data); });
} }
// Computes the angle of an arc, converting from radians to degrees. // Computes the angle of an arc, converting from radians to degrees.
function angle(d) { function angle(d) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90; var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
return a > 90 ? a - 180 : a; return a > 90 ? a - 180 : a;
} }
function tweenPie(b) { function tweenPie(b) {
b.innerRadius = 0; b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b); var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) { return function(t) {
return arc(i(t)); return arc(i(t));
}; };
} }
}); });
return chart; return chart;
} }
chart.dispatch = dispatch;
chart.margin = function(_) { chart.margin = function(_) {
if (!arguments.length) return margin; if (!arguments.length) return margin;
margin = _; margin = _;
@ -193,71 +163,46 @@ nv.models.pie = function() {
chart.width = function(_) { chart.width = function(_) {
if (!arguments.length) return width; if (!arguments.length) return width;
if (margin.left + margin.right + 20 > _) { width = _;
width = margin.left + margin.right + 20; // Min width
} else {
width = _;
}
radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
return chart; return chart;
}; };
chart.height = function(_) { chart.height = function(_) {
if (!arguments.length) return height; if (!arguments.length) return height;
if (margin.top + margin.bottom + 20 > _) { height = _;
height = margin.top + margin.bottom + 20; // Min height
} else {
height = _;
}
radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
return chart; return chart;
}; };
chart.animate = function(_) { chart.y = function(_) {
if (!arguments.length) return animate; if (!arguments.length) return getY;
animate = _; getY = d3.functor(_);
return chart; return chart;
}; };
chart.labelField = function(_) { chart.label = function(_) {
if (!arguments.length) return (label); if (!arguments.length) return getLabel;
label = _; getLabel = _;
return chart;
};
chart.dataField = function(_) {
if (!arguments.length) return (field);
field = _;
return chart; return chart;
}; };
chart.showLabels = function(_) { chart.showLabels = function(_) {
if (!arguments.length) return (showLabels); if (!arguments.length) return showLabels;
showLabels = _; showLabels = _;
return chart; return chart;
}; };
chart.donut = function(_) { chart.donut = function(_) {
if (!arguments.length) return (donut); if (!arguments.length) return donut;
donut = _; donut = _;
return chart; return chart;
};
chart.title = function(_) {
if (!arguments.length) return (title);
title = _;
return chart;
}; };
chart.id = function(_) { chart.id = function(_) {
if (!arguments.length) return id; if (!arguments.length) return id;
id = _; id = _;
return chart; return chart;
}; };
chart.dispatch = dispatch;
return chart;
return chart;
} }

213
src/models/pie_new.js
Unescape Escape View File

@ -1,213 +0,0 @@
nv.models.pie = function() {
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 500,
height = 500,
animate = 2000,
label ='label',
field ='y',
getY = function(d) { return d.y },
id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one
color = d3.scale.category20(),
showLabels = true,
donut = false;
var lastWidth = 0,
lastHeight = 0;
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
function chart(selection) {
selection.each(function(data) {
var availableWidth = width - margin.left - margin.right,
availableHeight = height - margin.top - margin.bottom,
radius = Math.min(availableWidth, availableHeight) / 2;
var container = d3.select(this)
.on('click', function(d,i) {
dispatch.chartClick({
data: d,
index: i,
pos: d3.event,
id: id
});
});
var wrap = container.selectAll('.wrap.pie').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class','wrap nvd3 pie chart-' + id);
var gEnter = wrapEnter.append('g');
var g = wrap.select('g')
gEnter.append('g').attr('class', 'pie');
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
g.select('.pie').attr('transform', 'translate(' + radius + ',' + radius + ')');
var arc = d3.svg.arc()
.outerRadius((radius-(radius / 5)));
if (donut) arc.innerRadius(radius / 2);
// Setup the Pie chart and choose the data element
var pie = d3.layout.pie()
.value(getY);
var slices = wrap.select('.pie').selectAll('.slice')
.data(pie);
slices.exit().remove();
var ae = slices.enter().append('svg:g')
.attr('class', 'slice')
.on('mouseover', function(d,i){
d3.select(this).classed('hover', true);
dispatch.tooltipShow({
label: d.data[label],
value: d.data[field],
data: d.data,
index: i,
pos: [d3.event.pageX, d3.event.pageY],
id: id
});
})
.on('mouseout', function(d,i){
d3.select(this).classed('hover', false);
dispatch.tooltipHide({
label: d.data[label],
value: d.data[field],
data: d.data,
index: i,
id: id
});
})
.on('click', function(d,i) {
dispatch.elementClick({
label: d.data[label],
value: d.data[field],
data: d.data,
index: i,
pos: d3.event,
id: id
});
d3.event.stopPropagation();
})
.on('dblclick', function(d,i) {
dispatch.elementDblClick({
label: d.data[label],
value: d.data[field],
data: d.data,
index: i,
pos: d3.event,
id: id
});
d3.event.stopPropagation();
});
var paths = ae.append('svg:path')
.attr('class','path')
.attr('fill', function(d, i) { return color(i); });
//.attr('d', arc);
d3.transition(slices.select('.path'))
.attr('d', arc)
//.ease('bounce')
.attrTween('d', tweenPie);
if (showLabels) {
// This does the normal label
ae.append('text');
d3.transition(slices.select('text'))
//.ease('bounce')
.attr('transform', function(d) {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return 'translate(' + arc.centroid(d) + ')';
})
.attr('text-anchor', 'middle') //center the text on it's origin
//.style('font', 'bold 12px Arial') // font style's should be set in css!
.text(function(d, i) { return d.data[label]; });
}
// Computes the angle of an arc, converting from radians to degrees.
function angle(d) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
return a > 90 ? a - 180 : a;
}
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) {
return arc(i(t));
};
}
});
return chart;
}
chart.dispatch = dispatch;
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
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.y = function(_) {
if (!arguments.length) return getY;
getY = d3.functor(_);
return chart;
};
chart.labelField = function(_) {
if (!arguments.length) return label;
label = _;
return chart;
};
chart.showLabels = function(_) {
if (!arguments.length) return showLabels;
showLabels = _;
return chart;
};
chart.donut = function(_) {
if (!arguments.length) return donut;
donut = _;
return chart;
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;
return chart;
};
return chart;
}
Write Preview
Loading…
Cancel
Save