D3.js v5.0 旭日图

数据结构：

{"name": "flare","children": [{"name": "","children": [{"name": "","children": [{"name": "","value": },]},]}

/* eslint-disable no-param-reassign */
/* eslint-disable no-return-assign */
import * as d3 from 'd3';export default function sunburstChart(id, dataset) {const width = 900;const height = 900;const radius = width / 6;const format = d3.format(',d');const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, dataset.children.length + 1));const svg = d3.select(id).append('svg').attr('width', width).attr('height', height);const partition = data => {const root = d3.hierarchy(data).sum(d => d.value).sort((a, b) => b.value - a.value);return d3.partition().size([2 * Math.PI, root.height + 1])(root);};const arc = d3.arc().startAngle(d => d.x0).endAngle(d => d.x1).padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)).padRadius(radius * 1.5).innerRadius(d => d.y0 * radius).outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1));const root = partition(dataset);root.each(d => (d.current = d));const g = svg.append('g').attr('transform', `translate(${width / 2},${width / 2})`);const path = g.append('g').selectAll('path').data(root.descendants().slice(1)).join('path').attr('fill', d => {while (d.depth > 1) d = d.parent;return color(d.data.name);}).attr('fill-opacity', d => (arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0)).attr('d', d => arc(d.current));path.filter(d => d.children).style('cursor', 'pointer').on('click', clicked);path.append('title').text(d =>`${d.ancestors().map(a => a.data.name).reverse().join('/')}\n${format(d.value)}`);const label = g.append('g').attr('pointer-events', 'none').attr('text-anchor', 'middle').style('user-select', 'none').selectAll('text').data(root.descendants().slice(1)).join('text').attr('dy', '0.35em').attr('fill-opacity', d => +labelVisible(d.current)).attr('transform', d => labelTransform(d.current)).text(d => d.data.name);const parent = g.append('circle').datum(root).attr('r', radius).attr('fill', 'none').attr('pointer-events', 'all').on('click', clicked);function clicked(p) {parent.datum(p.parent || root);root.each(d =>(d.target = {x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,y0: Math.max(0, d.y0 - p.depth),y1: Math.max(0, d.y1 - p.depth),}));const t = g.transition().duration(750);path.transition(t).tween('data', d => {const i = d3.interpolate(d.current, d.target);return t => (d.current = i(t));}).filter(function(d) {return +this.getAttribute('fill-opacity') || arcVisible(d.target);}).attr('fill-opacity', d => (arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0)).attrTween('d', d => () => arc(d.current));label.filter(function(d) {return +this.getAttribute('fill-opacity') || labelVisible(d.target);}).transition(t).attr('fill-opacity', d => +labelVisible(d.target)).attrTween('transform', d => () => labelTransform(d.current));}function arcVisible(d) {return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0;}function labelVisible(d) {return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03;}function labelTransform(d) {const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI;const y = ((d.y0 + d.y1) / 2) * radius;return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;}
}

D3.js v5.0 旭日图相关推荐

D3.js V5.0 词云图（标签云）
#词云图需要安装d3-cloud 插件. https://www.npmjs.com/package/d3-cloud 实现代码如下: const width = 500;const height ...
d3.js v5 饼状图（加载动画、悬浮动画、图注以及悬浮提示框）
实现的效果大概是这样: 实现代码如下: <html><body></body><style>div{background: #F2F4FF;width: ...
d3.js v5入门之——比例尺
比例尺是可视化中一项基本任务的便捷抽象:将抽象数据的维映射到视觉表示.尽管最常用于对定量数据进行位置编码,例如将以米为单位的测量值映射到散点图中点的像素位置,但刻度实际上可以表示任何位置编码,例如发散 ...
vue3.0-echarts@5.0 - 旭日图+bar图实现小太阳
本文的源码直接戳文章最后,关注公众号,戳同样标题的文章,可获得下载链接. 先来看一下成品图: gif 使用的生成工具,地址戳这里https://dongci.kawo.com/?iao.su 这个图表 ...
Vue中引入使用 D3.js
Vue中引入使用 D3.js 1. D3.js 学习文档 D3.js 中文网 D3.js 入门教程 D3.js v5版入门教程 d3.js API中文手册-[看云] d3.layout (布局)-[ ...
D3.js 力导向图来处理拓扑图
记录一点碰到的问题和解决方案.感觉国内关于D3.js 4.0版本的相关资料还是少. 力导向图布局 D3一种布局的方式,可以将你nodes links的节点数据转换成可以绘制的坐标点数据,然后通过svg ...
【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg 在svg中提添 ...
D3 二维图表的绘制系列（二十三）旭日图
上一篇: 桑基图 https://blog.csdn.net/zjw_python/article/details/98611559 下一篇: 力导向图 https://blog.csdn.net/z ...
D3.js的v5版本入门教程（第十四章）—— 力导向图
D3.js的v5版本入门教程(第十四章) 这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章绘制的效果就是 ...

D3.js v5.0 旭日图

D3.js v5.0 旭日图相关推荐

最新文章

热门文章