d3.js绘制饼状图,悬浮出现字以及点击事件

您所在的位置:网站首页 d3和echarts d3.js绘制饼状图,悬浮出现字以及点击事件

d3.js绘制饼状图,悬浮出现字以及点击事件

2023-04-02 21:25| 来源: 网络整理| 查看: 265

代码以及注释如下:

const width = 300; // 定义圆的宽度 const height = 300; // 定义圆的高度 const radius = Math.min(width, height) / 2; // 算出半径

const color = d3.scaleOrdinal()     .range(["#98abc5", "#8a89a6", "#6b486b", "#a05d56", "#d0743c"]); // 配置颜色

const arc = d3.arc()     .outerRadius(radius - 10) // 外圆半径     .innerRadius(0) ; // 内圆半径,如果为零则为实心圆

const pie = d3.pie() // 定义饼图     .sort(null)     .value(d => d.population); // 通过以下data数据中的population来分配饼图所占空间

const svg = d3.select("#gb08fe") // 添加一个svg图     .append("svg")     .attr("width", width)     .attr("height", height)     .append("g")     .attr("transform", `translate(${width / 2}, ${height / 2})`);

const data = [{ // 创建数据         age: "



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3