d3实现风玫瑰图图表效果代码-html代码-BFW代码库

代码语言：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&quo.........完整代码请登录后点击上方下载按钮下载查看