Fixing NVD3 issue #98, 'Object #<Object> has no method 'map' on pieChart'.

Updating pieChart examples, so that [testData] becomes testData (no extra
array brackets needed).

Also adding pieChart test page.
master
Robin Hu 11 years ago
parent a552f5aa28
commit 5af04cb857

@ -78,7 +78,7 @@ nv.addGraph(function() {
.height(height);
d3.select("#test1")
.datum([testdata])
.datum(testdata)
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
@ -113,7 +113,7 @@ nv.addGraph(function() {
d3.select("#test2")
//.datum(historicalBarChart)
.datum([testdata])
.datum(testdata)
.transition().duration(1200)
.attr('width', width)
.attr('height', height)

@ -58,7 +58,7 @@ nv.models.pieChart = function() {
chart.container = this;
//set state.disabled
state.disabled = data[0].map(function(d) { return !!d.disabled });
state.disabled = data.map(function(d) { return !!d.disabled });
if (!defaultState) {
var key;
@ -74,7 +74,7 @@ nv.models.pieChart = function() {
//------------------------------------------------------------
// Display No Data message if there's nothing to show.
if (!data[0] || !data[0].length) {
if (!data || !data.length) {
var noDataText = container.selectAll('.nv-noData').data([noData]);
noDataText.enter().append('text')
@ -117,7 +117,7 @@ nv.models.pieChart = function() {
.key(pie.x());
wrap.select('.nv-legendWrap')
.datum(pie.values()(data[0]))
.datum(pie.values()(data))
.call(legend);
if ( margin.top != legend.height()) {
@ -145,7 +145,7 @@ nv.models.pieChart = function() {
var pieWrap = g.select('.nv-pieWrap')
.datum(data);
.datum([data]);
d3.transition(pieWrap).call(pie);
@ -159,15 +159,15 @@ nv.models.pieChart = function() {
legend.dispatch.on('legendClick', function(d) {
d.disabled = !d.disabled;
if (!pie.values()(data[0]).filter(function(d) { return !d.disabled }).length) {
pie.values()(data[0]).map(function(d) {
if (!pie.values()(data).filter(function(d) { return !d.disabled }).length) {
pie.values()(data).map(function(d) {
d.disabled = false;
wrap.selectAll('.nv-series').classed('disabled', false);
return d;
});
}
state.disabled = data[0].map(function(d) { return !!d.disabled });
state.disabled = data.map(function(d) { return !!d.disabled });
dispatch.stateChange(state);
chart.update();
@ -175,7 +175,7 @@ nv.models.pieChart = function() {
legend.dispatch.on('legendDblclick', function(d) {
//Double clicking should always enable current series, and disabled all others.
var pieData = pie.values()(data[0]);
var pieData = pie.values()(data);
pieData.forEach(function(d) {
d.disabled = true;
});
@ -194,7 +194,7 @@ nv.models.pieChart = function() {
dispatch.on('changeState', function(e) {
if (typeof e.disabled !== 'undefined') {
data[0].forEach(function(series,i) {
data.forEach(function(series,i) {
series.disabled = e.disabled[i];
});

@ -0,0 +1,121 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<link href="teststyle.css" rel="stylesheet" type='text/css'>
<style>
body {
overflow-y:scroll;
font-family: Arial;
}
text {
font: 12px sans-serif;
}
</style>
<body class='with-transitions'>
<div class='chart third' id="test1">
<h2>Standard Pie Chart</h2>
<svg></svg>
</div>
<div class='chart third' id="test2">
<h2>Donut pie chart</h2>
<svg></svg>
</div>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/pie.js"></script>
<script src="../src/models/pieChart.js"></script>
<script src="../src/utils.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
},
{
key: "Seven",
y: .5
}
];
nv.addGraph(function() {
var width = 500,
height = 500;
var chart = nv.models.pieChart()
.x(function(d) { return d.key })
.y(function(d) { return d.y })
.values(function(d) { return d })
.color(d3.scale.category10().range())
.width(width)
.height(height);
d3.select("#test1 svg")
.datum(testdata)
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
nv.addGraph(function() {
var width = 500,
height = 500;
var chart = nv.models.pieChart()
.x(function(d) { return d.key })
.values(function(d) { return d })
.color(d3.scale.category10().range())
.width(width)
.height(height)
.donut(true);
chart.pie
.startAngle(function(d) { return d.startAngle/2 -Math.PI/2 })
.endAngle(function(d) { return d.endAngle/2 -Math.PI/2 });
d3.select("#test2 svg")
.datum(testdata)
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);
return chart;
});
</script>
Loading…
Cancel
Save