时间戳

首页 > 解决方案 > d3v4 饼图 - 在段悬停时 - 像蛋糕片一样展开段

javascript - d3v4 饼图 - 在段悬停时 - 像蛋糕片一样展开段

问题描述

我正在调整这个饼图代码 - 并尝试为该段设置动画，使其在悬停时像一块蛋糕一样突出。不知道为什么鼠标悬停/离开事件的范围不起作用。我试图调整半径，但它好像没有正确获得弧形对象

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');

        slices
            .append('path')
            .attr('d', arc)
            .attr('fill', function(d, i) {
                return color(i);
            })
            .transition()
            .attrTween('d', function(d) {
                var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
                return function(t) {
                    d.endAngle = i(t);
                    return arc(d);
                }
            });

          slices.on('mouseover', function(d) {                            
            console.log("mouseover", radius); 

            console.log("this", this)
            console.log("d3.select(this)", d3.select(this))


                let expandArc = d3.arc()
                            .innerRadius(innerradius)
                            .outerRadius(radius * 1.2);

                /*
                d3
                    .arc()
                    .outerRadius(radius)
                    .innerRadius(innerradius)
                */   

                d3.select(this)
                    .transition()
                    .duration(1000)
                    //.ease('bounce')
                    .attr('d', expandArc);



          });                                                           

          slices.on('mouseout', function() {                              
            console.log("mouseout");                          
          });

标签： javascriptd3.js

解决方案

展开切片

鼠标事件实际上是与元素绑定slices的。<g>然后d3.select(this)是<g>而不是确切的path元素。你可以看到悬停后<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)')                     
});

更新的演示

推荐阅读