d3实现风玫瑰图图表效果代码
代码语言：html
所属分类：图表
代码描述：d3实现风玫瑰图图表效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
color: hsl(0, 0%, 100%);
background: linear-gradient(hsl(212, 41%, 25%), hsl(216, 53%, 21%));
--color-lines: hsl(219, 90%, 76%);
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
min-height: 100vh;
display: flex;
}
svg {
margin: auto;
display: block;
max-width: 42rem;
width: 95vw;
height: auto;
}
</style>
</head>
<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.7.6.1.js"></script>
<script >
// https://mesonet.agron.iastate.edu/sites/windrose.phtml?station=FXY&network=IA_ASOS
const data = {
station: "Forest City",
calm: 11.16,
directions: [
{
angles: [355, 4],
speed: [
{ interval: "2-4.9", value: 0.276 },
{ interval: "5-6.9", value: 0.374 },
{ interval: "7-9.9", value: 0.403 },
{ interval: "10-14.9", value: 0.659 },
{ interval: "15-19.9", value: 0.325 },
{ interval: "20+", value: 0.069 }] },
{
angles: [5, 14],
speed: [
{ interval: "2-4.9", value: 0.285 },
{ interval: "5-6.9", value: 0.285 },
{ interval: "7-9.9", value: 0.216 },
{ interval: "10-14.9", value: 0.315 },
{ interval: "15-19.9", value: 0.167 },
{ interval: "20+", value: 0.01 }] },
{
angles: [15, 24],
speed: [
{ interval: "2-4.9", value: 0.384 },
{ interval: "5-6.9", value: 0.187 },
{ interval: "7-9.9", value: 0.118 },
{ interval: "10-14.9", value: 0.226 },
{ interval: "15-19.9", value: 0.089 },
{ interval: "20+", value: 0 }] },
{
angles: [25, 34],
speed: [
{ interval: "2-4.9", value: 0.187 },
{ interval: "5-6.9", value: 0.207 },
{ interval: "7-9.9", value: 0.089 },
{ interval: "10-14.9", value: 0.226 },
{ interval: "15-19.9", value: 0.108 },
{ interval: "20+", value: 0.03 }] },
{
angles: [35, 44],
speed: [
{ interval: "2-4.9", value: 0.177 },
{ interval: "5-6.9", value: 0.295 },
{ interval: "7-9.9", value: 0.177 },
{ interval: "10-14.9", value: 0.187 },
{ interval: "15-19.9", value: 0.03 },
{ interval: "20+", value: 0 }] },
{
angles: [45, 54],
speed: [
{ interval: "2-4.9", value: 0.187 },
{ interval: "5-6.9", value: 0.167 },
{ interval: "7-9.9", value: 0.157 },
{ interval: "10-14.9", value: 0.098 },
{ interval: "15-19.9", value: 0.059 },
{ interval: "20+", value: 0 }] },
{
angles: [55, 64],
speed: [
{ interval: "2-4.9", value: 0.108 },
{ interval: "5-6.9", value: 0.187 },
{ interval: "7-9.9", value: 0.157 },
{ interval: "10-14.9", value: 0.138 },
{ interval: "15-19.9", value: 0 },
{ interval: "20+", value: 0 }] },
{
angles: [65, 74],
speed: [
{ interval: "2-4.9", value: 0.167 },
{ interval: "5-6.9", value: 0.157 },
{ interval: "7-9.9", value: 0.079 },
{ interval: "10-14.9", value: 0.049 },
{ interval: "15-19.9", value: 0.01 },
{ interval: "20+", value: 0 }] },
{
angles: [75, 84],
speed: [
{ interval: "2-4.9", value: 0.138 },
{ interval: "5-6.9", value: 0.216 },
{ interval: "7-9.9", value: 0.226 },
{ interval: "10-14.9", value: 0.039 },
{ interval: "15-19.9", value: 0 },
{ interval: "20+", value: 0 }] },
{
angles: [85, 94],
speed: [
{ interval: "2-4.9", value: 0.148 },
{ interval: "5-6.9", value: 0.266 },
{ interval: "7-9.9", value: 0.295 },
{ interval: "10-14.9", value: 0.148 },
{ interval: "15-19.9", value: 0 },
{ interval: "20+", value: 0 }] },
{
angles: [95, 104],
speed: [
{ interval: "2-4.9", value: 0.187 },
{ interval: "5-6.9", value: 0.246 },
{ interval: "7-9.9", value: 0.118 },
{ interval: "10-14.9", value: 0.256 },
{ interval: "15-19.9", value: 0.089 },
{ interval: "20+", value: 0.02 }] },
{
angles: [105, 114],
speed: [
{ interval: "2-4.9", value: 0.403 },
{ interval: "5-6.9", value: 0.403 },
{ interval: "7-9.9", value: 0.236 },
{ interval: "10-14.9", value: 0.187 },
{ interval: "15-19.9", value: 0.069 },
{ interval: "20+", value: 0.03 }] },
{
angles: [115, 124],
speed: [
{ interval: "2-4.9", value: 0.403 },
{ interval: "5-6.9", value: 0.423 },
{ interval: "7-9.9", value: 0.197 },
{ interval: "10-14.9", value: 0.384 },
{ interval: "15-19.9", value: 0.216 },
{ interval: "20+", value: 0.049 }] },
{
angles: [125, 134],
speed: [
{ interval: "2-4.9", value: 0.472 },
{ interval: "5-6.9", value: 0.571 },
{ interval: "7-9.9", value: 0.413 },
{ interval: "10-14.9", value: 0.767 },
{ interval: "15-19.9", value: 0.413 },
{ interval: "20+", value: 0.148 }] },
{
angles: [135, 144],
speed: [
{ interval: "2-4.9", value: 0.551 },
{ interval: "5-6.9", value: 0.453 },
{ interval: "7-9.9", value: 0.659 },
{ interval: "10-14.9", value: 0.945 },
{ interval: "15-19.9", value: 0.659 },
{ interval: "20+", value: 0.266 }] },
{
angles: [145, 154],
speed: [
{ interval: "2-4.9", value: 0.374 },
{ interval: "5-6.9", value: 0.472 },
{ interval: "7-9.9", value: 0.659 },
{ interval: "10-14.9", value: 1.092 },
{ interval: "15-19.9", value: 0.394 },
{ interval: "20+", value: 0.089 }] },
{
angles: [155, 164],
speed: [
{ interval: "2-4.9", value: 0.492 },
{ interval: "5-6.9", value: 0.364 },
{ interval: "7-9.9", value: 0.571 },
{ interval: "10-14.9", value: 0.994 },
{ interval: "15-19.9", value: 0.394 },
{ interval: "20+", value: 0.187 }] },
{
angles: [165, 174],
speed: [
{ interval: "2-4.9", value: 0.492 },
{ interval: "5-6.9", value: 0.453 },
{ interval: "7-9.9", value: 0.453 },
{ interval: "10-14.9", value: 0.964 },
{ interval: "15-19.9", value: 0.305 },
{ interval: "20+", value: 0.108 }] },
{
angles: [175, 184],
speed: [
{ interval: "2-4.9", value: 0.167 },
{ interval: "5-6.9", value: 0.325 },
{ interval: "7-9.9", value: 0.443 },
{ interval: "10-14.9", value: 0.866 },
{ interval: "15-19.9", value: 0.384 },
{ interval: "20+", value: 0.049 }] },
{
angles: [185, 194],
speed: [
{ interval: "2-4.9", value: 0.315 },
{ interval: "5-6.9", value: 0.246 },
{ interval: "7-9.9", value: 0.453 },
{ interval: "10-14.9", value: 0.689 },
{ interval: "15-19.9", value: 0.364 },
{ interval: "20+", value: 0.089 }] },
{
angles: [195, 204],
speed: [
{ interval: "2-4.9", value: 0.413 },
{ interval: "5-6.9", value: 0.581 },
{ interval: "7-9.9", value: 0.502 },
{ interval: "10-14.9", value: 0.689 },
{ interval: "15-19.9", value: 0.167 },
{ interval: "20+", value: 0.03 }] },
{
angles: [205, 214],
speed: [
{ interval: "2-4.9", value: 0.541 },
{ interval: "5-6.9", value: 0.531 },
{ interval: "7-9.9", value: 0.394 },
{ interval: "10-14.9", value: 0.521 },
{ interval: "15-19.9", value: 0.098 },
{ interval: "20+", value: 0.049 }] },
{
angles: [215, 224],
speed: [
{ interval: "2-4.9", value: 0.61 },
{ interval: "5-6.9", value: 0.492 },
{ interval: "7-9.9", value: 0.571 },
{ interval: "10-14.9", value: 0.659 },
{ interval: "15-19.9", value: 0.157 },
{ interval: "20+", value: 0.049 }] },
{
angles: [225, 234],
speed: [
{ interval: "2-4.9", value: 0.64 },
{ interval: "5-6.9", value: 0.758 },
{ interval: "7-9.9", value: 0.512 },
{ interval: "10-14.9", value: 0.699 },
{ interval: "15-19.9", value: 0.177 },
{ interval: "20+", value: 0.01 }] },
{
angles: [235, 244],
speed: [
{ interval: "2-4.9", value: 0.718 },
{ interval: "5-6.9", value: 0.531 },
{ interval: "7-9.9", value: 0.285 },
{ interval: "10-14.9", value: 0.236 },
{ interval: "15-19.9", value: 0.02 },
{ interval: "20+", value: 0 }] },
{
angles: [245, 254],
speed: [
{ interval: "2-4.9", value: 0.571 },
{ interval: "5-6.9", value: 0.482 },
{ interval: "7-9.9", value: 0.216 },
{ interval: "10-14.9", value: 0.108 },
{ interval: "15-19.9", value: 0 },
{ interva.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0