Skip to content

Commit

Permalink
new pieChart, and lots of updates to pie implementation... still need…
Browse files Browse the repository at this point in the history 
… to tweak a few things, including animation when series are disabled
  • Loading branch information
@bobmonteverde
bobmonteverde committed Jun 28, 2012
1 parent feca679 commit a61bdfc
Show file tree
Hide file tree
Showing 5 changed files with 289 additions and 113 deletions.
86 changes: 15 additions & 71 deletions examples/pie.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,62 +23,61 @@

var testdata = [
{
label: "One",
key: "One",
y: 5
},
{
label: "Two",
key: "Two",
y: 2
},
{
label: "Three",
key: "Three",
y: 9
},
{
label: "Four",
key: "Four",
y: 7
},
{
label: "Five",
key: "Five",
y: 4
},
{
label: "Six",
key: "Six",
y: 3
}
];

var testdata2 = [
{
label: "One",
key: "One",
y: 10
},
{
label: "Two",
key: "Two",
y: 5
},
{
label: "Three",
key: "Three",
y: 3
},
{
label: "Four",
key: "Four",
y: 7
},
{
label: "Five",
key: "Five",
y: 2
}

];

var td = 0;
var a = (Math.random()*10)+1;
if (a > 5) td = 1;
var a = Math.random();
if (a > .5) td = 1;

//Format A
nv.addGraph({
generate: function() {

nv.addGraph(function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;

Expand Down Expand Up @@ -108,61 +107,6 @@


return chart;
},
callback: function(graph) {

graph.dispatch.on('tooltipShow', function(e) {
var offsetElement = document.getElementById("chart"),
left = e.pos[0],
top = e.pos[1];

var content = '<h3>' + e.label + '</h3>' +
'<p>' +
e.value +
'</p>';

nv.tooltip.show([left, top], content);
});

graph.dispatch.on('tooltipHide', function(e) {
nv.tooltip.cleanup();
});

graph.dispatch.on('chartClick', function(e) {
console.log('Click Switching to');
if (td === 0) {
d3.select("#test1")
.datum(testdata2)
.call(graph);
td = 1;

} else {
d3.select("#test1")
.datum(testdata)
.call(graph);
td = 0;
}
});

graph.dispatch.on('elementClick', function(e) { console.log("Clicked on Element",e); });
graph.dispatch.on('elementDblClick', function(e) { console.log("Double Clicked on Element",e); });
//graph.dispatch.on('chartClick', function(e) { console.log("Clicked on chart",e); });

window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;

d3.select("#test1")
.transition().duration(0)
.attr('width', width)
.attr('height', height)
.call(
graph
.width(width)
.height(height)
)
};
}
});


Expand Down
74 changes: 74 additions & 0 deletions examples/pieChart.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!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;
}

</style>
<body>

<svg id="test1"></svg>

<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/pie.js"></script>
<script src="../src/models/pieChart.js"></script>
<script>

var testdata = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
},
{
key: "Four",
y: 7
},
{
key: "Five",
y: 4
},
{
key: "Six",
y: 3
}
];


nv.addGraph(function() {
var width = 500,
height = 500;


var chart = nv.models.pieChart()
//.showLabels(false)
.width(width)
.height(height);

d3.select("#test1")
.datum(testdata)
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);

return chart;
});


</script>
25 changes: 0 additions & 25 deletions src/models/discreteBarChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,31 +87,6 @@ nv.models.discreteBarChart = function() {
.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
.ticks( availableWidth / 100 )
Expand Down
48 changes: 31 additions & 17 deletions src/models/pie.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@

nv.models.pie = function() {
var margin = {top: 20, right: 20, bottom: 20, left: 20},
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 500,
height = 500,
getLabel = function(d) { return d.label },
getLabel = function(d) { return d.key },
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(),
color = d3.scale.category20().range(),
valueFormat = d3.format(',.2f'),
showLabels = true,
donut = false;

var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout');

function chart(selection) {
selection.each(function(data) {
Expand Down Expand Up @@ -62,31 +63,30 @@ nv.models.pie = function() {
.attr('class', 'slice')
.on('mouseover', function(d,i){
d3.select(this).classed('hover', true);
dispatch.tooltipShow({
dispatch.elementMouseover({
label: getLabel(d.data),
value: getY(d.data),
data: d.data,
index: i,
point: d.data,
pointIndex: i,
pos: [d3.event.pageX, d3.event.pageY],
id: id
});
})
.on('mouseout', function(d,i){
d3.select(this).classed('hover', false);
dispatch.tooltipHide({
dispatch.elementMouseout({
label: getLabel(d.data),
value: getY(d.data),
data: d.data,
point: d.data,
index: i,
id: id
});
})
.on('click', function(d,i) {
console.log(d);
dispatch.elementClick({
label: getLabel(d.data),
value: getY(d.data),
data: d.data,
point: d.data,
index: i,
pos: d3.event,
id: id
Expand All @@ -97,27 +97,29 @@ nv.models.pie = function() {
dispatch.elementDblClick({
label: getLabel(d.data),
value: getY(d.data),
data: d.data,
point: 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); });
slices
.attr('fill', function(d,i) { return color[i]; });

var paths = slices.append('svg:path')
//.attr('d', arc);

d3.transition(slices.select('.path'))
d3.transition(slices.select('path'))
.attr('d', arc)
//.ease('bounce')
.attrTween('d', tweenPie);

if (showLabels) {
// This does the normal label
ae.append('text');
ae.append('text')
.attr('fill', '#000');

d3.transition(slices.select('text'))
//.ease('bounce')
Expand Down Expand Up @@ -203,6 +205,18 @@ nv.models.pie = function() {
return chart;
};

chart.color = function(_) {
if (!arguments.length) return color;
color = _;
return chart;
};

chart.valueFormat = function(_) {
if (!arguments.length) return valueFormat;
valueFormat = _;
return chart;
};


return chart;
}
Loading

0 comments on commit a61bdfc

Please sign in to comment.