javascript 如何在 d3 中悬停时增加饼图段的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30816709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increase size of pie segment on hover in d3
提问by Valentin Blokhin
I created pie chart using d3. How to increase size of pie segment on hover? As you can see, green segment is so small so I want to change it size like red segment. How can I do this?
我使用 d3 创建了饼图。如何在悬停时增加饼图段的大小？如您所见，绿色段太小了，所以我想像红色段一样改变它的大小。我怎样才能做到这一点？
My code:
我的代码：
var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.category20c();
var data = [{"label":"Category A", "value":20},
{"label":"Category B", "value":50},
{"label":"Category C", "value":30},
{"label":"Category A", "value":20},
{"label":"Category B", "value":50},
{"label":"Category C", "value":30},
{"label":"Category A", "value":20},
{"label":"Category B", "value":50},
{"label":"Category C", "value":5}];
var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d){return d.value;});
// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);
var arcOver = d3.svg.arc()
.outerRadius(r + 9);
// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
arcs.append("svg:path")
.attr("fill", function(d, i){
return color(i);
})
.attr("d", function (d) {
// log the result of the arc generator to show how cool it is :)
console.log(arc(d));
return arc(d);
})
.on("mouseenter", function(d) {
d3.select(this)
.attr("stroke","white")
.transition()
.duration(1000)
.attr("d", arcOver)
.attr("stroke-width",6);
})
.on("mouseleave", function(d) {
d3.select(this).transition()
.attr("d", arc)
.attr("stroke","none");
});;
There is example in js fiddle : jsfiddleThanks.
js fiddle 中有示例：jsfiddle谢谢。
采纳答案by Valentin Blokhin
I just found solution for my problem.
我刚刚找到了解决我的问题的方法。
I changed startAngleand endAnglein d3:
我改变startAngle并endAngle在d：
.on("mouseenter", function(d) {
var endAngle = d.endAngle + 0.2;
var startAngle = d.startAngle - 0.2;
var arcOver = d3.svg.arc()
.outerRadius(r + 9).endAngle(endAngle).startAngle(startAngle);
d3.select(this)
.attr("stroke","white")
.transition()
.duration(1000)
.attr("d", arcOver)
.attr("stroke-width",6);
})
Working example: jsfiddle
工作示例：jsfiddle
回答by Jaffer Wilson
Now this is the right code. Try it..ok
现在这是正确的代码。试试吧。。好吧
<!DOCTYPE html>
<html>
<head>
<title>Dsnap - Charts</title>
</head>
<body>
<div id="wrapper">
</div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var canvas = d3.select('#wrapper')
.append('svg')
.attr({
'width': 650,
'height': 500
});
var data = [{
"label": "one",
"value": 40
}, {
"label": "two",
"value": 30
}, {
"label": "three",
"value": 30
}];
var colors = ['red', 'blue'];
var colorscale = d3.scale.linear().domain([0, data.length]).range(colors);
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(100);
var arcOver = d3.svg.arc()
.innerRadius(0)
.outerRadius(150 + 10);
var pie = d3.layout.pie()
.value(function(d) {
return d.value;
});
var renderarcs = canvas.append('g')
.attr('transform', 'translate(440,200)')
.selectAll('.arc')
.data(pie(data))
.enter()
.append('g')
.attr('class', "arc");
renderarcs.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return colorscale(i);
})
.on("mouseover", function(d) {
d3.select(this).transition()
.duration(1000)
.attr("d", arcOver);
})
.on("mouseout", function(d) {
d3.select(this).transition()
.duration(1000)
.attr("d", arc);
});
renderarcs.append('text')
.attr('transform', function(d) {
var c = arc.centroid(d);
console.log(c);
return "translate(" + c[0] + "," + c[1] + ")";
})
.text(function(d) {
return d.value + "%";
});
</script>
</body>
</html>