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

Pie/Bar chart fixes/enhancments

Browse Source
master-patched
Nathanael Anderson 12 years ago
parent b72d51858a
commit f79e78be6e
6 changed files with 288 additions and 75 deletions
Show Stats Download Patch File Download Diff File

13
examples/bar.html
Unescape Escape View File

@ -23,12 +23,12 @@ text {
var testdata = [
{
label: "One",
label: "One is a very long",
y: 5
},
{
label: "Two",
y: 2
label: "Two is also very long",
y: null
},
{
label: "Three",
@ -36,7 +36,7 @@ text {
},
{
label: "Four",
y: -7
y: 7
},
{
label: "Five",
@ -58,7 +58,10 @@ nv.addGraph({
.width(width)
.height(height)
.labelField('label')
.dataField('y');
.dataField('y')
.showLabels(true)
.title("This is a sample chart title")
;
d3.select("#test1")
.attr('width', width)

5
examples/pie.html
Unescape Escape View File

@ -58,7 +58,9 @@ nv.addGraph({
var chart = nv.models.pie()
.width(width)
.height(height);
.height(height)
.title('Hi this is the chart title')
;
d3.select("#test1")
.attr('width', width)
@ -90,6 +92,7 @@ nv.addGraph({
});
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() {

164
nv.d3.js
Unescape Escape View File

@ -251,36 +251,39 @@ nv.utils.windowSize = function() {
})();
nv.models.bar = function() {
var margin = {top: 20, right: 10, bottom: 20, left: 60},
var margin = {top: 20, right: 10, bottom: 80, left: 60},
width = 960,
height = 500,
animate = 500,
label ='label',
hasLabel = false,
rotatedLabel = true,
showLabels = true,
id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one
field ='y';
color = d3.scale.category20(),
field ='y',
title = '';
var x = d3.scale.ordinal(),
y = d3.scale.linear(),
xAxis = d3.svg.axis().scale(x).orient('bottom'),
yAxis = d3.svg.axis().scale(y).orient('left'),
dispatch = d3.dispatch('chartClick', 'elementClick', 'tooltipShow', 'tooltipHide');
dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
function chart(selection) {
function chart(selection) {
selection.each(function(data) {
x .domain(data.map(function(d,i) { return d[label]; }))
.rangeRoundBands([0, width - margin.left - margin.right], .1);
var min = d3.min(data, function(d) { return d[field]; });
var max = d3.max(data, function(d) { return d[field]; });
var min = d3.min(data, function(d) { return d[field] });
var max = d3.max(data, function(d) { return d[field] });
var x0 = Math.max(-min, max);
var x1 = -x0;
// If we have no negative values, then lets stack this with just positive bars
if (min > 0) x1 = 0;
y .domain([x1, x0 ])
// If we have no negative values, then lets stack this with just positive bars
if (min >= 0) x1 = 0;
y .domain([x1, x0])
.range([height - margin.top - margin.bottom, 0])
.nice();
@ -297,10 +300,18 @@ nv.models.bar = function() {
});
});
var wrap = parent.selectAll('g.wrap').data([data]);
parent.append("text")
.attr("class", "title")
.attr("dy", ".91em")
.attr("text-anchor", "start")
.text(title);
var wrap = parent.selectAll('g.wrap').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'wrap').attr('id','wrap-'+id).append('g');
gEnter.append('g').attr('class', 'x axis');
gEnter.append('g').attr('class', 'y axis');
gEnter.append('g').attr('class', 'bars');
@ -319,7 +330,6 @@ nv.models.bar = function() {
bars.exit().remove();
var barsEnter = bars.enter().append('g')
// .attr('class', 'bar')
.attr("class", function(d, i) { return d[field] < 0 ? "bar negative" : "bar positive"; })
.on('mouseover', function(d,i){
d3.select(this).classed('hover', true);
@ -354,11 +364,25 @@ nv.models.bar = function() {
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();
});
barsEnter.append('rect')
.attr('y', function(d) { return y(0); }); //Math.min(0, d[field])); });
.attr('y', function(d) { return y(0); })
.attr("fill", function(d, i) { return color(i); });
barsEnter.append('text')
.attr('text-anchor', 'middle')
.attr('dy', '-4px');
@ -377,19 +401,36 @@ nv.models.bar = function() {
.attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
// function(d) { return y.range()[0] - y(d[field]) });
if (hasLabel) {
bars.selectAll('text')
/* if (hasLabel) {
bars.selectAll('text')
.attr('x', 0 )
.attr('y', function(d) { return y(d[field]) })
.attr('dx', x.rangeBand() / 2)
.text(function(d) { return d[field] });
}
} */
g.select('.x.axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')')
.call(xAxis);
g.select('.y.axis')
if (rotatedLabel) {
g.select('.x.axis').selectAll('text').attr('text-anchor','start').attr("transform", function(d) {
return "rotate(35)translate(" + this.getBBox().height/2 + "," + '0' + ")";
});
}
if (!showLabels) {
g.select('.x.axis').selectAll('text').attr('fill', 'rgba(0,0,0,0)');
g.select('.x.axis').selectAll('line').attr('style', 'opacity: 0');
}
/*else {
g.select('.x.axis').selectAll('text').attr('fill', 'rgba(0,0,0,1)');
g.select('.x.axis').selectAll('line').attr('style', 'opacity: 1');
}*/
g.select('.y.axis')
.call(yAxis);
});
@ -444,8 +485,25 @@ nv.models.bar = function() {
return chart;
};
chart.rotatedLabel = function(_) {
if (!arguments.length) return rotatedLabel;
rotatedLabel = _;
return chart;
};
chart.showLabels = function(_) {
if (!arguments.length) return (showLabels);
showLabels = _;
return chart;
};
chart.xaxis = {};
chart.title = function(_) {
if (!arguments.length) return (title);
title = _;
return chart;
};
chart.xaxis = {};
// Expose the x-axis' tickFormat method.
d3.rebind(chart.xaxis, xAxis, 'tickFormat');
@ -1681,19 +1739,21 @@ nv.models.lineWithLegend = function() {
}
nv.models.pie = function() {
var margin = {top: 20, right: 10, bottom: 20, left: 60},
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 500,
height = 500,
animate = 2000,
radius = Math.min(width, height) / 2,
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(),
hasLabel = false;
showLabels = true,
donut = false,
title = '';
var dispatch = d3.dispatch('chartClick', 'elementClick', 'tooltipShow', 'tooltipHide');
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
function chart(selection) {
selection.each(function(data) {
@ -1708,11 +1768,22 @@ nv.models.pie = function() {
});
});
parent.append("text")
.attr("class", "title")
.attr("dy", ".91em")
.attr("text-anchor", "start")
.text(title);
parent = parent.append('svg').attr('x', margin.left).attr('y', margin.top).style('overflow','visible');
var wrap = parent.selectAll('g.wrap').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'wrap').attr('id','wrap-'+id);
wrap.attr('width', width)
.attr('height', height)
wrap.attr('width', width) //-(margin.left+margin.right))
.attr('height', height) //-(margin.top+margin.bottom))
.attr("transform", "translate(" + radius + "," + radius + ")");
gEnter.append('g').attr('class', 'pie');
@ -1720,6 +1791,8 @@ nv.models.pie = function() {
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]; });
@ -1730,7 +1803,8 @@ nv.models.pie = function() {
slices.exit().remove();
var ae = slices.enter().append("svg:g")
var ae = slices.enter().append("svg:g")
.attr("class", "slice")
.on('mouseover', function(d,i){
d3.select(this).classed('hover', true);
@ -1764,6 +1838,17 @@ nv.models.pie = function() {
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();
});
@ -1772,7 +1857,7 @@ nv.models.pie = function() {
.attr("fill", function(d, i) { return color(i); })
.attr('d', arc);
if (hasLabel) {
if (showLabels) {
// This does the normal label
ae.append("text")
.attr("transform", function(d) {
@ -1782,7 +1867,8 @@ nv.models.pie = function() {
})
.attr("text-anchor", "middle") //center the text on it's origin
.style("font", "bold 12px Arial")
.text(function(d, i) { return d.data[label] + ': ' + d.data[field]; });
//.attr("fill", function(d, i) { return color(i); })
.text(function(d, i) { return d.data[label]; });
}
@ -1828,7 +1914,7 @@ nv.models.pie = function() {
} else {
width = _;
}
radius = Math.min(width, height) / 2;
radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
return chart;
};
@ -1839,7 +1925,7 @@ nv.models.pie = function() {
} else {
height = _;
}
radius = Math.min(width, height) / 2;
radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
return chart;
};
@ -1861,6 +1947,24 @@ nv.models.pie = function() {
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 = _;

20
src/d3.css
Unescape Escape View File

@ -11,6 +11,7 @@
}
/********************
* TOOLTIP CSS
*/
@ -77,7 +78,9 @@ text {
font: 12px sans-serif;
}
svg .title {
font: bold 14px Arial;
}
/**********
* Brush
@ -138,12 +141,12 @@ text {
*/
.bars .negative rect {
fill: brown;
zfill: brown;
cursor: pointer;
}
.bars rect {
fill: steelblue;
zfill: steelblue;
cursor: pointer;
}
@ -159,6 +162,9 @@ text {
fill: rgba(0,0,0,1);
}
.x.axis text {
transform: rotate(90);
}
/***********
* Pie Chart
*/
@ -167,14 +173,6 @@ text {
fill: lightblue;
}
.pie text {
fill: rgba(0,0,0,0);
}
.pie .hover text {
fill: black;
}
/**********
* Lines
*/

93
src/models/bar.js
Unescape Escape View File

@ -1,34 +1,38 @@
nv.models.bar = function() {
var margin = {top: 20, right: 10, bottom: 20, left: 60},
var margin = {top: 20, right: 10, bottom: 80, left: 60},
width = 960,
height = 500,
animate = 500,
label ='label',
hasLabel = false,
rotatedLabel = true,
showLabels = true,
id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one
field ='y';
color = d3.scale.category20(),
field ='y',
title = '';
var x = d3.scale.ordinal(),
y = d3.scale.linear(),
xAxis = d3.svg.axis().scale(x).orient('bottom'),
yAxis = d3.svg.axis().scale(y).orient('left'),
dispatch = d3.dispatch('chartClick', 'elementClick', 'tooltipShow', 'tooltipHide');
dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
function chart(selection) {
function chart(selection) {
selection.each(function(data) {
x .domain(data.map(function(d,i) { return d[label]; }))
.rangeRoundBands([0, width - margin.left - margin.right], .1);
var min = d3.min(data, function(d) { return d[field]; });
var max = d3.max(data, function(d) { return d[field]; });
var min = d3.min(data, function(d) { return d[field] });
var max = d3.max(data, function(d) { return d[field] });
var x0 = Math.max(-min, max);
var x1 = -x0;
// If we have no negative values, then lets stack this with just positive bars
if (min > 0) x1 = 0;
y .domain([x1, x0 ])
// If we have no negative values, then lets stack this with just positive bars
if (min >= 0) x1 = 0;
y .domain([x1, x0])
.range([height - margin.top - margin.bottom, 0])
.nice();
@ -45,10 +49,18 @@ nv.models.bar = function() {
});
});
var wrap = parent.selectAll('g.wrap').data([data]);
parent.append("text")
.attr("class", "title")
.attr("dy", ".91em")
.attr("text-anchor", "start")
.text(title);
var wrap = parent.selectAll('g.wrap').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'wrap').attr('id','wrap-'+id).append('g');
gEnter.append('g').attr('class', 'x axis');
gEnter.append('g').attr('class', 'y axis');
gEnter.append('g').attr('class', 'bars');
@ -67,7 +79,6 @@ nv.models.bar = function() {
bars.exit().remove();
var barsEnter = bars.enter().append('g')
// .attr('class', 'bar')
.attr("class", function(d, i) { return d[field] < 0 ? "bar negative" : "bar positive"; })
.on('mouseover', function(d,i){
d3.select(this).classed('hover', true);
@ -102,11 +113,25 @@ nv.models.bar = function() {
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();
});
barsEnter.append('rect')
.attr('y', function(d) { return y(0); });
.attr('y', function(d) { return y(0); })
.attr("fill", function(d, i) { return color(i); });
barsEnter.append('text')
.attr('text-anchor', 'middle')
.attr('dy', '-4px');
@ -125,19 +150,36 @@ nv.models.bar = function() {
.attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
// function(d) { return y.range()[0] - y(d[field]) });
if (hasLabel) {
/* if (hasLabel) {
bars.selectAll('text')
.attr('x', 0 )
.attr('y', function(d) { return y(d[field]) })
.attr('dx', x.rangeBand() / 2)
.text(function(d) { return d[field] });
}
} */
g.select('.x.axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')')
.call(xAxis);
g.select('.y.axis')
if (rotatedLabel) {
g.select('.x.axis').selectAll('text').attr('text-anchor','start').attr("transform", function(d) {
return "rotate(35)translate(" + this.getBBox().height/2 + "," + '0' + ")";
});
}
if (!showLabels) {
g.select('.x.axis').selectAll('text').attr('fill', 'rgba(0,0,0,0)');
g.select('.x.axis').selectAll('line').attr('style', 'opacity: 0');
}
/*else {
g.select('.x.axis').selectAll('text').attr('fill', 'rgba(0,0,0,1)');
g.select('.x.axis').selectAll('line').attr('style', 'opacity: 1');
}*/
g.select('.y.axis')
.call(yAxis);
});
@ -192,8 +234,25 @@ nv.models.bar = function() {
return chart;
};
chart.rotatedLabel = function(_) {
if (!arguments.length) return rotatedLabel;
rotatedLabel = _;
return chart;
};
chart.showLabels = function(_) {
if (!arguments.length) return (showLabels);
showLabels = _;
return chart;
};
chart.title = function(_) {
if (!arguments.length) return (title);
title = _;
return chart;
};
chart.xaxis = {};
chart.xaxis = {};
// Expose the x-axis' tickFormat method.
d3.rebind(chart.xaxis, xAxis, 'tickFormat');

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

@ -1,18 +1,20 @@
nv.models.pie = function() {
var margin = {top: 20, right: 10, bottom: 20, left: 60},
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 500,
height = 500,
animate = 2000,
radius = Math.min(width, height) / 2,
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(),
hasLabel = false;
showLabels = true,
donut = false,
title = '';
var dispatch = d3.dispatch('chartClick', 'elementClick', 'tooltipShow', 'tooltipHide');
var dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
function chart(selection) {
selection.each(function(data) {
@ -27,11 +29,22 @@ nv.models.pie = function() {
});
});
parent.append("text")
.attr("class", "title")
.attr("dy", ".91em")
.attr("text-anchor", "start")
.text(title);
parent = parent.append('svg').attr('x', margin.left).attr('y', margin.top).style('overflow','visible');
var wrap = parent.selectAll('g.wrap').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'wrap').attr('id','wrap-'+id);
wrap.attr('width', width)
.attr('height', height)
wrap.attr('width', width) //-(margin.left+margin.right))
.attr('height', height) //-(margin.top+margin.bottom))
.attr("transform", "translate(" + radius + "," + radius + ")");
gEnter.append('g').attr('class', 'pie');
@ -39,6 +52,8 @@ nv.models.pie = function() {
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]; });
@ -49,7 +64,8 @@ nv.models.pie = function() {
slices.exit().remove();
var ae = slices.enter().append("svg:g")
var ae = slices.enter().append("svg:g")
.attr("class", "slice")
.on('mouseover', function(d,i){
d3.select(this).classed('hover', true);
@ -83,6 +99,17 @@ nv.models.pie = function() {
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();
});
@ -91,7 +118,7 @@ nv.models.pie = function() {
.attr("fill", function(d, i) { return color(i); })
.attr('d', arc);
if (hasLabel) {
if (showLabels) {
// This does the normal label
ae.append("text")
.attr("transform", function(d) {
@ -101,7 +128,8 @@ nv.models.pie = function() {
})
.attr("text-anchor", "middle") //center the text on it's origin
.style("font", "bold 12px Arial")
.text(function(d, i) { return d.data[label] + ': ' + d.data[field]; });
//.attr("fill", function(d, i) { return color(i); })
.text(function(d, i) { return d.data[label]; });
}
@ -147,7 +175,7 @@ nv.models.pie = function() {
} else {
width = _;
}
radius = Math.min(width, height) / 2;
radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
return chart;
};
@ -158,7 +186,7 @@ nv.models.pie = function() {
} else {
height = _;
}
radius = Math.min(width, height) / 2;
radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
return chart;
};
@ -180,6 +208,24 @@ nv.models.pie = function() {
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 = _;

Write Preview
Loading…
Cancel
Save