多个饼图未加载
Muliple pie charts are not loading
我正在尝试使用 d3 js 在单个页面中添加多个饼图。
饼图在 2 时正在加载,但是当我添加第 3 个饼图时,该图没有附加到 SVG。
[这是我的完整代码。]
我的小提琴:http://www.jsfiddle.net/SampathPerOxide/xt0L1scu/10/
var h = 600;
var r = h / 2;
var arc = d3.svg.arc().outerRadius(r);
var data = [{
"label": "a",
"value": 74
},
{
"label": "b",
"value": 7
},
{
"label": "b",
"value": 7
},
{
"label": "d",
"value": 12
}
];
var data1 = [{
"label": "e",
"value": 74
},
{
"label": "f",
"value": 7
},
{
"label": "g",
"value": 7
},
{
"label": "h",
"value": 12
}
];
var data2 = [{
"label": "i",
"value": 74
},
{
"label": "j",
"value": 7
},
{
"label": "k",
"value": 7
},
{
"label": "l",
"value": 12
}
];
var colors = [
'rgb(178, 55, 56)',
'rgb(213, 69, 70)',
'rgb(230, 125, 126)',
'rgb(239, 183, 182)'
]
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.color(colors)
.showLabels(true)
.labelType("percent");
d3.select("#chart svg")
.datum(data)
.transition().duration(1200)
.call(chart);
d3.selectAll(".nv-label text")
.attr("transform", function(d) {
d.innerRadius = -450;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
/* Alter CSS attributes */
.style({
"font-size": "1em"
});
d3.selectAll('.nv-series').each(function(d, i) {
var group = d3.select(this),
circle = group.select('circle');
var color = circle.style('fill');
circle.remove();
var symbol = group.append('path')
.attr('d', d3.svg.symbol().type('square'))
.style('stroke', color)
.style('fill', color)
.attr('transform', 'scale(1.5) translate(-2,0)')
});
return chart;
});
nv.addGraph(function() {
var chartnew = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.color(colors)
.showLabels(true)
.labelType("percent");
d3.select("#chartnew svg")
.datum(data1)
.transition().duration(1200)
.call(chartnew);
d3.selectAll(".nv-label text")
/* Alter SVG attribute (not CSS attributes) */
.attr("transform", function(d) {
d.innerRadius = -450;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.style({
"font-size": "1em"
});
d3.selectAll('.nv-series').each(function(d, i) {
var group = d3.select(this),
circle = group.select('circle');
var color = circle.style('fill');
circle.remove();
var symbol = group.append('path')
.attr('d', d3.svg.symbol().type('square'))
.style('stroke', color)
.style('fill', color)
.attr('transform', 'scale(1.5) translate(-2,0)')
});
return chartnew;
});
nv.addGraph(function() {
var chartnewagains = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.color(colors)
.showLabels(true)
.labelType("percent");
d3.select("#chartnewagain svg")
.datum(data2)
.transition().duration(1200)
.call(chartnewagains);
d3.selectAll(".nv-label text")
.attr("transform", function(d) {
d.innerRadius = -450;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.style({
"font-size": "1em"
});
d3.selectAll('.nv-series').each(function(d, i) {
var group1 = d3.select(this),
circle = group.select('circle');
var color = circle.style('fill');
circle.remove();
var symbol = group.append('path')
.attr('d', d3.svg.symbol().type('square'))
.style('stroke', color)
.style('fill', color)
// ADJUST SIZE AND POSITION
.attr('transform', 'scale(1.5) translate(-2,0)')
});
return chartnewagains;
});
如何使用上述代码在同一页面上添加五个饼图?
您需要将 selection 集中在每个 SVG 上。
因此,首先 select 当前 SVG:
const svg = d3.select("#chartnewagain svg")
然后,
svg.selectAll(".nv-label text")
svg.selectAll('.nv-series')
因为,当您使用 d3.selectAll(".something") 时,您正在 select 使用 class .something 处理所有内容(也在 SVG 上方),而您没有想要那个。
希望对您有所帮助:)
编辑:
问题是
d3.selectAll('.nv-series').each(function(d, i) {
var group = d3.select(this),
circle = group.select('circle');
console.log(circle)
var color = circle.style('fill'); // error
...
因为当你第一次这样做时,'.nv-series'
是从第一个 svg select 编辑的,一切都很好。第二次 '.nv-series'
是从第一个和第二个 svg select 编辑的,并且因为你已经在第一个中删除了那个圆圈,所以当你从一个它无法找到的元素中获取样式时它会抛出一个错误 circle = group.select('circle')
所以,解决方案是:
const svg = d3.select("#div_id svg")
...
svg.selectAll(".nv-label text")
...
svg.selectAll('.nv-series')
...
对于每个实例
我认为 Donat 建议的解决方案行不通,因为问题不仅仅是选择。我简化了将 data
、data1
、data2
推入名为 alldata
的数组的代码。这允许我为每个 alldata 循环创建一个 forEach
循环,并创建一个统一的 drawchart 函数,可以为数据绘制饼图。
经过多次故障排除后,我发现代码中的问题是附加的数据图例导致了问题。似乎 circle.remove();
导致了问题。我编辑了下面 fiddle 中的代码,通过使用更好的选择删除圆圈来解决问题。
这是一个完整的工作 fiddle,其中改进了代码以使其更易于阅读:
https://jsfiddle.net/coolakul/z1b2p7x3/
希望对您有所帮助。如果您有任何需要澄清的地方,请告诉我。
我正在尝试使用 d3 js 在单个页面中添加多个饼图。 饼图在 2 时正在加载,但是当我添加第 3 个饼图时,该图没有附加到 SVG。 [这是我的完整代码。] 我的小提琴:http://www.jsfiddle.net/SampathPerOxide/xt0L1scu/10/
var h = 600;
var r = h / 2;
var arc = d3.svg.arc().outerRadius(r);
var data = [{
"label": "a",
"value": 74
},
{
"label": "b",
"value": 7
},
{
"label": "b",
"value": 7
},
{
"label": "d",
"value": 12
}
];
var data1 = [{
"label": "e",
"value": 74
},
{
"label": "f",
"value": 7
},
{
"label": "g",
"value": 7
},
{
"label": "h",
"value": 12
}
];
var data2 = [{
"label": "i",
"value": 74
},
{
"label": "j",
"value": 7
},
{
"label": "k",
"value": 7
},
{
"label": "l",
"value": 12
}
];
var colors = [
'rgb(178, 55, 56)',
'rgb(213, 69, 70)',
'rgb(230, 125, 126)',
'rgb(239, 183, 182)'
]
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.color(colors)
.showLabels(true)
.labelType("percent");
d3.select("#chart svg")
.datum(data)
.transition().duration(1200)
.call(chart);
d3.selectAll(".nv-label text")
.attr("transform", function(d) {
d.innerRadius = -450;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
/* Alter CSS attributes */
.style({
"font-size": "1em"
});
d3.selectAll('.nv-series').each(function(d, i) {
var group = d3.select(this),
circle = group.select('circle');
var color = circle.style('fill');
circle.remove();
var symbol = group.append('path')
.attr('d', d3.svg.symbol().type('square'))
.style('stroke', color)
.style('fill', color)
.attr('transform', 'scale(1.5) translate(-2,0)')
});
return chart;
});
nv.addGraph(function() {
var chartnew = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.color(colors)
.showLabels(true)
.labelType("percent");
d3.select("#chartnew svg")
.datum(data1)
.transition().duration(1200)
.call(chartnew);
d3.selectAll(".nv-label text")
/* Alter SVG attribute (not CSS attributes) */
.attr("transform", function(d) {
d.innerRadius = -450;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.style({
"font-size": "1em"
});
d3.selectAll('.nv-series').each(function(d, i) {
var group = d3.select(this),
circle = group.select('circle');
var color = circle.style('fill');
circle.remove();
var symbol = group.append('path')
.attr('d', d3.svg.symbol().type('square'))
.style('stroke', color)
.style('fill', color)
.attr('transform', 'scale(1.5) translate(-2,0)')
});
return chartnew;
});
nv.addGraph(function() {
var chartnewagains = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.color(colors)
.showLabels(true)
.labelType("percent");
d3.select("#chartnewagain svg")
.datum(data2)
.transition().duration(1200)
.call(chartnewagains);
d3.selectAll(".nv-label text")
.attr("transform", function(d) {
d.innerRadius = -450;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.style({
"font-size": "1em"
});
d3.selectAll('.nv-series').each(function(d, i) {
var group1 = d3.select(this),
circle = group.select('circle');
var color = circle.style('fill');
circle.remove();
var symbol = group.append('path')
.attr('d', d3.svg.symbol().type('square'))
.style('stroke', color)
.style('fill', color)
// ADJUST SIZE AND POSITION
.attr('transform', 'scale(1.5) translate(-2,0)')
});
return chartnewagains;
});
如何使用上述代码在同一页面上添加五个饼图?
您需要将 selection 集中在每个 SVG 上。 因此,首先 select 当前 SVG:
const svg = d3.select("#chartnewagain svg")
然后,
svg.selectAll(".nv-label text")
svg.selectAll('.nv-series')
因为,当您使用 d3.selectAll(".something") 时,您正在 select 使用 class .something 处理所有内容(也在 SVG 上方),而您没有想要那个。
希望对您有所帮助:)
编辑: 问题是
d3.selectAll('.nv-series').each(function(d, i) {
var group = d3.select(this),
circle = group.select('circle');
console.log(circle)
var color = circle.style('fill'); // error
...
因为当你第一次这样做时,'.nv-series'
是从第一个 svg select 编辑的,一切都很好。第二次 '.nv-series'
是从第一个和第二个 svg select 编辑的,并且因为你已经在第一个中删除了那个圆圈,所以当你从一个它无法找到的元素中获取样式时它会抛出一个错误 circle = group.select('circle')
所以,解决方案是:
const svg = d3.select("#div_id svg")
...
svg.selectAll(".nv-label text")
...
svg.selectAll('.nv-series')
...
对于每个实例
我认为 Donat 建议的解决方案行不通,因为问题不仅仅是选择。我简化了将 data
、data1
、data2
推入名为 alldata
的数组的代码。这允许我为每个 alldata 循环创建一个 forEach
循环,并创建一个统一的 drawchart 函数,可以为数据绘制饼图。
经过多次故障排除后,我发现代码中的问题是附加的数据图例导致了问题。似乎 circle.remove();
导致了问题。我编辑了下面 fiddle 中的代码,通过使用更好的选择删除圆圈来解决问题。
这是一个完整的工作 fiddle,其中改进了代码以使其更易于阅读: https://jsfiddle.net/coolakul/z1b2p7x3/
希望对您有所帮助。如果您有任何需要澄清的地方,请告诉我。