无法在 d3.js 中的同一页面上生成两个饼图
Failed to generating two pie charts on the same page in d3.js
失败示例
沃金示例
我正在切换这个饼图以获得动画效果。我将代码包装在一个函数中,并使用$.each()
遍历元素以在同一页面上生成两个图表,但与工作示例不同,这是我用于生成饼图的原始代码,我无法让它工作。谁能弄清楚问题是什么?
var colors = ["#DFC267","#90C0E2","#DF5A6E","#FFA854","#749D79","#BFE5E2","#d3d3d3"];
function pie(dataset,el){
console.log(dataset);
var data = [];
var color = d3.scale.ordinal().range(colors);
r = 115,
labelr = r + 30,
pi = 2 * Math.PI,
svg = d3.select(el).append('svg').
attr('width', 350).
attr('height', 350),
group = svg.append('g').
attr('transform', 'translate(155, 170)')
,
arc = d3.svg.arc().
innerRadius(r - 50).
outerRadius(r)
,
pie = d3.layout.pie()
.value(function(d) { return d.result; }),
format = d3.format('.3r'),
arcs = group.selectAll('.arc').
data(pie(d3.values(dataset))).
enter().
append('g').
attr('class', 'arc')
;
arcs.append('path').
transition().
delay(function(d, i) { return i * 500; }).
duration(750).
attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle + 0, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d);
};
}).
style('fill', function(d, i) { return color(i); }).
style('stroke', '#fff').
style('stroke-width', '2px')
;
arcs.append('text').
attr('transform', function(d) {
var c = arc.centroid(d),
x = c[0],
y = c[1],
h = Math.sqrt(x*x + y*y);
return "translate(" + (x/h * labelr) + ',' +
(y/h * labelr) + ")";
}).
attr('text-anchor', 'middle').
attr('font-size', '1em').
attr('fill', '#222').
text(function (d) {
var total = d3.sum(dataset.map(function(d) {
return d.result;
}));
var percent = Math.round(1000 * d.value / total) / 10;
return percent + ' %';
});
var tooltip = d3.select(el).append('div').attr('class', 'tooltip');
arcs.on('mousemove', function(d) { console.log(d3.event);
tooltip.style("top", d3.event.y - r+ "px").style("left", d3.event.x + "px")
});
arcs.on('mouseover', function(d) {
var total = d3.sum(dataset.map(function(d) {
return d.result;
}));
tooltip.style('display', 'block')
.style("opacity", 1)
.append('div')
.attr('class', 'label')
.append('div')
.attr('class', 'count')
tooltip.select('.label').html(d.data.item);
tooltip.select('.count').html(d.data.result);
});
arcs.on('mouseout', function() {
tooltip.style('display', 'none');
});
}
$('.j_chart').each(function(k,i){
var dataset = $(this).find('.j_data').text();
console.log(dataset);
pie(JSON.parse(dataset),'#j_'+k);
})
这是工作代码:
var colors = ["#DFC267","#90C0E2","#DF5A6E","#FFA854","#749D79","#BFE5E2","#d3d3d3"];
function pie(dataset,el){ console.log(dataset)
'use strict';
var width = 280;
var height = 280;
var radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal().range(colors);
var svg = d3.select(el)
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (height / 2) + ')');
var arc = d3.svg.arc()
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) { return d.result; })
.sort(null);
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.item);
});
var tooltip = d3.select(el).append('div').attr('class', 'tooltip');
path.on('mousemove', function(d) { console.log(d3.event);
tooltip.style("top", d3.event.y - radius + "px").style("left", d3.event.x + "px")
});
path.on('mouseover', function(d) {
var total = d3.sum(dataset.map(function(d) {
return d.result;
}));
var percent = Math.round(1000 * d.data.result / total) / 10;
tooltip
.style('display', 'block')
.style("opacity", 1)
.append('div')
.attr('class', 'label')
.append('div')
.attr('class', 'count')
.append('div')
.attr('class', 'percent');
tooltip.select('.label').html(d.data.item);
tooltip.select('.count').html(d.data.result);
tooltip.select('.percent').html(percent + '%');
});
path.on('mouseout', function() {
tooltip.style('display', 'none');
});
}
问题是你有一个名为"pie"的函数,在该函数中,你
pie = d3.layout.pie()
因此,覆盖函数定义和最终结果是仅对第一项调用它。 尝试将函数重命名为其他名称,例如pie_func。 检查这个小提琴与更正:http://jsfiddle.net/cesarpachon/a4r2q4pw/
相关文章:
- 工具提示在带有两个图表的d3.js中消失
- d3用时钟中的两个指针变换原点
- 当我在同一页上有两个图D3.js时,宽度异常
- 将两个图形(饼图和条形图)并排对齐::d3-js
- d3.js可以使用来自同一来源的数据在同一张图上绘制两个散点图吗
- 比较D3.js中的两个时间对象
- 两个“调用”以拖动 d3 中的事件
- D3 - 在两个不与其他对象相交的对象之间绘制一条线
- 两个折线图之间的 D3 区域
- 无法在 d3.js 中的同一页面上生成两个饼图
- d3.js用相同的select选项控制两个图
- D3 map - 将两个不相交的 SVG 多边形路径合并为一个路径
- 如何在 d3 中选择前两个元素并对其应用过渡
- D3:对两个节点之间的圆进行动画处理
- 我可以在 D3 中一次指定两个属性吗?
- D3.js为每个数据点创建两个元素
- 使用 d3 在图表中有两个刻度
- d3:计算两个节点之间的线的中点,画一条从它到一个新节点成90度角的线
- 链接两个D3图
- 如何将两个d3对象合并为一个进行批量操作