d3.js放射线条生成器lineRadial

白色是用三角函数生成的数据。
红色是随机生成的数据。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>放射线条生成器</title><script src="../d3/d3.js"></script>
</head><body><script>let svg = d3.select('body').append('svg').attr('width', 400).attr('height', 400).style('background-color', 'black')let angles = d3.range(0, 2 * Math.PI, Math.PI / 180);let lin = d3.lineRadial().curve(d3.curveLinearClosed).angle((d) => { return d }).radius((d) => { return (80 + 10 * Math.sin(10 * d)) })svg.append('g').attr("transform", "translate(200,200)").append('path').attr('d', lin(angles)).attr("stroke", "#FFF").attr("stroke-width", 2).attr("fill", "none")let data = [1, 2, 3, 4];for (let i = 0; i < 40; i++) {data[i] = Math.ceil(Math.random()*100) ;}let len = data.length;let max = d3.max(data);let min = d3.min(data);let angs = [];for (let i = 0; i < len; i++) {angs[i] = i * Math.PI * 2 / len;data[i] = 100 + 50 * data[i] / max;}let line = d3.lineRadial()// .curve(d3.curveBasisClosed).curve(d3.curveCatmullRomClosed)// .curve(d3.curveLinearClosed).angle((d) => { return d }).radius((d, i) => { return data[i] })svg.append('g').attr("transform", "translate(200,200)").append('path').attr('d', line(angs)).attr("stroke", "#F00").attr("stroke-width", 2).attr("fill", "none")</script>
</body></html>

d3.js放射线条生成器lineRadial相关推荐

3、Spark 和 D3.js 分析航班大数据
实验资源 1998.csv airports.csv 实验环境 VMware Workstation Ubuntu 16.04 spark-2.4.5 scala-2.12.10 实验内容 " ...
数据可视化利器D3.js教程 API
汇智网 http://xc.hubwiz.com/course/54fd40cfe564e50d50dcf284 D3.js 入门系列 - 选择元素和绑定数据 https://www.cnblogs. ...
D3.js之折线图动画
主要实现的效果一个折线图,然后线条可以从头到尾的出现. 折线图的代码基本上是别人的(本人也是正在学习的),自己只是在这上面基础上添加动画和一些文字和circle 参考:参考折线图的博客参考SVG动画 ...
【D3.js数据可视化实战】--（3）桑基图（sankey）的绘制
什么是桑基图用D3绘制简单的Sankey图添加文字圆形节点添加交互效果注:本文未经作者允许严禁转载和演绎 1 什么是桑基图? 桑基图是流图 (flow diagram )的一种,用来描述能量 ...
D3.js 教程: 使用 JavaScript 创建可交互的柱状图
原文链接:D3.js Tutorial: Building Interactive Bar Charts with JavaScript 译者:OFED 最近,我们有幸参与了一个机器学习项目,该项目涉 ...
d3.js 入门指南 - 仪表盘
D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...
d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
使用JavaScript和D3.js实现数据可视化
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数 ...
D3.js的技术预研
背景目前团队在可视化图表这里采用的Echarts来展示数据, 类似也是用第三方组件库提供的API,但在有的时候还是满足不了业务百变的需求. 预研目标 • 使用D3技术实现可视化功能简介 D3是一个 ...

d3.js放射线条生成器lineRadial

d3.js放射线条生成器lineRadial

d3.js放射线条生成器lineRadial相关推荐

最新文章

热门文章