布局 = 數(shù)據(jù)轉(zhuǎn)換 主要用d3.layout.xxx生成轉(zhuǎn)換器定義轉(zhuǎn)換規(guī)則

 const dataSet = [120, 260, 400, 330, 300];
    const width = 700, height = 500, padding = {top: 60, left: 30};
    const svg = d3.select("body").append("svg").attr("width", width + padding.left * 2).attr("height", height + padding.top * 2);
    //    定義布局(數(shù)據(jù)轉(zhuǎn)換規(guī)則)
    // pie的轉(zhuǎn)換規(guī)則會用value給的值轉(zhuǎn)換成endAngle padAngle startAngle 和數(shù)值value
    const pie = d3.layout.pie().value(function (d) {
        return d;
    });
    const pieData = pie(dataSet);
    const color = d3.scale.category10();
    const arcPath = d3.svg.arc().innerRadius(0).outerRadius(width / 3);
    svg.append("g").attr("transform", "translate(300,250)")
        .selectAll("path").data(pieData).enter().append("path").attr("class", "path")
    //        初始化
        .attr("d", function (d) {
            return arcPath({
                endAngle: d.endAngle,
                padAngle: d.endAngle - d.startAngle - 1,
                startAngle: d.startAngle
            });
        })
        .attr("fill", function (d, i) {
            return color(i);
        })
        //        執(zhí)行過渡
        .transition().duration(2000).ease("bounce-out")
        .attr("d", function (d) {
            return arcPath(d);
        });
    svg.append("g").selectAll("text").data(pieData).enter().append("text")
    //        初始化
        .attr("transform", function (d) {
//            arcPath.centroid(弧角度對象)獲取到一個(gè)相對當(dāng)前弧中心的
//            此時(shí)餅圖的父元素g在300,250 
// 所以需要把文字也移動到該然后用centroid計(jì)算出相對圓心的距離的數(shù)組然后設(shè)置translate平移過去
            return "translate(300,250)" + "translate(" + arcPath.centroid(d) + ")";
        }).attr("text-anchor", "middle").attr("stroke", "purple")
        .text(function (d) {
            return d.value;
        });
    //    綁定事件
    svg.selectAll(".path").on("mouseover", function (d) {
        d3.select(this).transition().duration(300).ease("bounce").attr("d", function (d) {
            arcPath.outerRadius(width / 3 + 30);
            return arcPath(d);
        })
    }).on("mouseout", function (d) {
        d3.select(this).transition().duration(300).ease("bounce").attr("d", function (d) {
            arcPath.outerRadius(width / 3);
            return arcPath(d);
        })
    });

結(jié)果

image.png

注:centroid

image.png