分离型三维饼图怎么做 计算角度和变换

　　元素被用作容器。.slice类定义了我们的饼图切片的基本样式和过渡效果。

　　创建分离型三维饼图

　　现在，我们将开始创建分离型三维饼图。下面是整个过程的步骤：

　　准备数据

　　首先，我们需要准备数据，这些数据将用于绘制和计算饼图切片。以下是示例数据：

　　```

　　var data=[

　　{ value: 10, color: "#6b5b95" },

　　{ value: 20, color: "#feb236" },

　　{ value: 30, color: "#d64161" },

　　{ value: 40, color: "#ff7b25" }

　　];

　　```

　　计算角度和变换

　　现在我们需要计算每个饼图切片的角度，以及将其变换到其三维状态。这可以通过以下代码完成：

　　```

　　var total=d3.sum(data, d=> d.value);

　　var radius=100;

　　var angles=data.map(d=> 2 * Math.PI * d.value / total);

　　var transforms=data.map((d, i)=> {

　　var angle=d3.sum(angles.slice(0, i)) + angles[i] * 0.5;

　　var x=Math.sin(angle) * radius;

　　var y=-Math.cos(angle) * radius;

　　return `translate3d(${x}px, ${y}px, 0) rotateX(90deg) rotateZ(${angle * 180 / Math.PI}deg)`;

　　});

　　```

　　在这段代码中，我们使用d3.sum函数计算所有数据的总和。然后，我们定义了一个半径变量，以便计算每个饼图切片的大小和位置。我们还通过计算从之一个饼图切片到当前饼图切片的总角度来计算每个角度，这使我们能够计算每个切片的位置。最后，我们将这些计算结果组合成一个CSS变换字符串，该字符串将每个切片变换到其三维状态。

　　绘制切片

　　最后，我们需要在页面上绘制我们的饼图切片。以下是绘图代码：

　　```

　　d3.select("#chart").selectAll(".slice")

　　.data(data)

　　.enter().append("div")

　　.attr("class", "slice")

　　.style("background", d=> d.color)

　　.style("transform", (d, i)=> transforms[i])

　　.on("mouseover", function() { d3.select(this).style("opacity", 1); })

　　.on("mouseout", function() { d3.select(this).style("opacity", 0.9); });

　　```

　　在此代码中，我们首先选取容器元素，然后使用selectAll和data函数将数据绑定到所有饼图切片元素上。然后，我们使用enter和append函数创建新的元素，并将其加入到容器中。我们还使用style函数将每个切片的背景色设置为其对应的颜色。然后，我们应用之前计算的CSS变换来定位每个饼图切片。最后，我们使用on函数为每个元素绑定mouseover和mouseout事件，以增强特效。

　　现在分离型三维饼图绘制完成啦！