d3v4 饼图 - 分段悬停 - 像切蛋糕一样展开分段

Question

我正在调整这个饼图代码 - 并尝试为该部分设置动画，使其在悬停时像一块蛋糕一样突出。不确定为什么鼠标悬停/离开事件的范围不起作用。我试过调整半径，但好像没有正确获取弧形对象http://jsfiddle.net/xejmwnob/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 $this = '#chart';        d3.select($this)            .selectAll('svg')            .remove();                const width = 300,            height = 300,            radius = 120,            innerradius = 0;                var arc = d3            .arc()            .outerRadius(radius)            .innerRadius(innerradius);        data.forEach(function(d) {            d.total = +d.value;        });        var pie = d3            .pie()            .sort(null)            .value(function(d) {                return d.total;            });        var svg = d3            .select($this)            .append('svg')            .attr('width', width)            .attr('height', height)            .append('g')            .attr('class', 'piechart')            .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');        var segments = svg.append('g').attr('class', 'segments');        var slices = segments            .selectAll('.arc')            .data(pie(data))            .enter()            .append('g')            .attr('class', 'arc');

Answer 1

如果我通过“拉出切片”正确理解你，那么你想要平移切片的位置，而不是改变它的形状。

困难的部分是弄清楚将形状转换到哪里，以便切片沿着正确的角度从中心移动。最简单的解决方案是使用centroid，切片的中点，然后根据需要调整这些值：

slices.on('mouseover', function(d) {

  d3.select(this)

    .transition()

    .duration(1000)

    .attr('transform', 'translate(' + (arc.centroid(d)[0] / 2) + ',' + (arc.centroid(d)[1] / 2) + ')');

});

slices.on('mouseout', function() {

  d3.select(this)

    .transition()

    .duration(500)

    .attr('transform', 'translate(0, 0)');

});

在这里，我将质心 x 和 y 值分成两半，这样切片就不会离开 SVG 区域。

演示

PS：var color = d3.scale.category20c();是 d3v3，在 d3v4 中做它会是：var color = d3.scaleOrdinal(d3.schemeCategory20);。您链接的小提琴正在使用两者。

Answer 2

展开切片

鼠标事件实际上是与元素slices绑定的。<g>然后d3.select(this)是 the<g>而不是 exactpath元素。可以看到hover 之后<g>会有d属性，但是我们需要d改变path.

尝试

slices.on('mouseover', function(d) {          

    let expandArc = d3.arc()

                .innerRadius(innerradius)

                .outerRadius(radius * 1.2);   

    d3.select(this)

        .select("path")

        .transition()

        .duration(1000)

        //.ease('bounce')

        .attr('d', expandArc);

});  

翻译切片

找到路径的质心并在悬停时平移它

let offset = 4;// how much do you want to translate from the origin

slices.on('mouseover', function(d) {                            

    d3.select(this)

        .transition()

        .duration(1000)

        .attr('transform', 'translate(' + arc.centroid(d)[0] / offset + ',' + arc.centroid(d)[1] / offset + ')')

});                                                           

slices.on('mouseout', function() {                                     

    d3.select(this)

        .transition()

        .duration(1000)

        .attr('transform', 'translate(0,0)')                     

});   

更新演示