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) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; let expandArc = d3.arc()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .innerRadius(innerradius)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .outerRadius(radius * 1.2);&nbsp; &nbsp;&nbsp; &nbsp; d3.select(this)&nbsp; &nbsp; &nbsp; &nbsp; .select("path")&nbsp; &nbsp; &nbsp; &nbsp; .transition()&nbsp; &nbsp; &nbsp; &nbsp; .duration(1000)&nbsp; &nbsp; &nbsp; &nbsp; //.ease('bounce')&nbsp; &nbsp; &nbsp; &nbsp; .attr('d', expandArc);});&nbsp;&nbsp;翻译切片找到路径的质心并在悬停时平移它let offset = 4;// how much do you want to translate from the originslices.on('mouseover', function(d) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; d3.select(this)&nbsp; &nbsp; &nbsp; &nbsp; .transition()&nbsp; &nbsp; &nbsp; &nbsp; .duration(1000)&nbsp; &nbsp; &nbsp; &nbsp; .attr('transform', 'translate(' + arc.centroid(d)[0] / offset + ',' + arc.centroid(d)[1] / offset + ')')});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;slices.on('mouseout', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; d3.select(this)&nbsp; &nbsp; &nbsp; &nbsp; .transition()&nbsp; &nbsp; &nbsp; &nbsp; .duration(1000)&nbsp; &nbsp; &nbsp; &nbsp; .attr('transform', 'translate(0,0)')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp;更新演示