javascript - 带有粒子的D3.js Sankey图-6ren

javascript - 带有粒子的D3.js Sankey图

转载作者：行者123 更新时间：2023-12-03 08:08:04

我一直在使用d3 Javascript库试验sankey图。我最近在bl.ocks上遇到了一个非常漂亮的sankey图。

https://bl.ocks.org/micahstubbs/ae0946f9efe18fc4f67460e7387abc0b

在将其应用于自己的sankey图之前，我要做的第一件事是复制bl.ocks页面上的所有代码，并在自己的代码编辑器(Dreamweaver)中进行尝试。问题是，每当我尝试加载sankey时，都会出现以下控制台错误:

SyntaxError: missing = in const declaration

我不太了解这里发生的情况，因为在bl.ocks页面上似乎工作正常。这段代码应该在下面:

for (const x in particles) {
  if ({}.hasOwnProperty.call(particles, x)) {
    const currentTime = elapsed - particles[x].time;
    // var currentPercent = currentTime / 1000 * particles[x].path.getTotalLength();
    particles[x].current = currentTime * 0.15 * particles[x].speed;
    const currentPos = particles[x].path.getPointAtLength(particles[x].current);
    context.beginPath();
    context.fillStyle = particles[x].link.particleColor(0);
    context.arc(currentPos.x, currentPos.y + particles[x].offset, particles[x].link.particleSize, 0, 2 * Math.PI);
    context.fill();
  }
}

它在vis.js代码的底部。谁能帮助我使此代码正常工作？我喜欢视觉效果，并想学习使用它。谢谢。

最佳答案

从MDN:
常数是程序在正常执行期间无法更改的值。它不能通过重新分配进行更改，也不能重新声明。在JavaScript中，使用const关键字声明常量。需要一个常量的初始化程序；也就是说，您必须在声明它的同一条语句中指定它的值(这很有意义，因为以后不能更改)。

您的数据(能量)可能未正确加载。除非您发布整个代码，否则我无法告诉您哪里出了问题。但是我将下面的bl.ocks.org中的图表代码进行了组合。它也适用于Codepen。

<html lang='en'>

<head>
  <meta charset='utf-8' />
  <title>Sankey Particles</title>
  <style>
    .node rect {
      cursor: move;
      fill-opacity: .9;
      shape-rendering: crispEdges;
    }
    
    .node text {
      pointer-events: none;
      text-shadow: 0 1px 0 #fff;
    }
    
    .link {
      fill: none;
      stroke: #000;
      stroke-opacity: .15;
    }
    
    .link:hover {
      stroke-opacity: .25;
    }
    
    svg {
      position: absolute;
    }
    
    canvas {
      position: absolute;
    }
  </style>
</head>

<body>
  <canvas width='960' height='960'></canvas>
  <svg width='960' height='960'></svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js' charset='utf-8' type='text/javascript'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.4.2/d3-sankey.js' charset='utf-8' type='text/javascript'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3-timer/1.0.5/d3-timer.js' charset='utf-8' type='text/javascript'></script>
  <script src='vis.js'></script>
  <script>
    const margin = { top: 1, right: 1, bottom: 6, left: 1 };
    const width = 960 - margin.left - margin.right;
    const height = 500 - margin.top - margin.bottom;
    const formatNumber = d3.format(",.0f");
    const format = d => `${formatNumber(d)} TWh`;
    const color = d3.scaleOrdinal(d3.schemeCategory20);
    
    const svg = d3
      .select("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", `translate(${margin.left},${margin.top})`);
    
    const sankey = d3.sankey().nodeWidth(15).nodePadding(10).size([width, height]);
    
    const path = sankey.link();
    
    const freqCounter = 1;
    
    var energy = {
      nodes: [
        { name: "Agricultural 'waste'" },
        { name: "Bio-conversion" },
        { name: "Liquid" },
        { name: "Losses" },
        { name: "Solid" },
        { name: "Gas" },
        { name: "Biofuel imports" },
        { name: "Biomass imports" },
        { name: "Coal imports" },
        { name: "Coal" },
        { name: "Coal reserves" },
        { name: "District heating" },
        { name: "Industry" },
        { name: "Heating and cooling - commercial" },
        { name: "Heating and cooling - homes" },
        { name: "Electricity grid" },
        { name: "Over generation / exports" },
        { name: "H2 conversion" },
        { name: "Road transport" },
        { name: "Agriculture" },
        { name: "Rail transport" },
        { name: "Lighting & appliances - commercial" },
        { name: "Lighting & appliances - homes" },
        { name: "Gas imports" },
        { name: "Ngas" },
        { name: "Gas reserves" },
        { name: "Thermal generation" },
        { name: "Geothermal" },
        { name: "H2" },
        { name: "Hydro" },
        { name: "International shipping" },
        { name: "Domestic aviation" },
        { name: "International aviation" },
        { name: "National navigation" },
        { name: "Marine algae" },
        { name: "Nuclear" },
        { name: "Oil imports" },
        { name: "Oil" },
        { name: "Oil reserves" },
        { name: "Other waste" },
        { name: "Pumped heat" },
        { name: "Solar PV" },
        { name: "Solar Thermal" },
        { name: "Solar" },
        { name: "Tidal" },
        { name: "UK land based bioenergy" },
        { name: "Wave" },
        { name: "Wind" }
      ],
      links: [
        { source: 0, target: 1, value: 124.729 },
        { source: 1, target: 2, value: 0.597 },
        { source: 1, target: 3, value: 26.862 },
        { source: 1, target: 4, value: 280.322 },
        { source: 1, target: 5, value: 81.144 },
        { source: 6, target: 2, value: 35 },
        { source: 7, target: 4, value: 35 },
        { source: 8, target: 9, value: 11.606 },
        { source: 10, target: 9, value: 63.965 },
        { source: 9, target: 4, value: 75.571 },
        { source: 11, target: 12, value: 10.639 },
        { source: 11, target: 13, value: 22.505 },
        { source: 11, target: 14, value: 46.184 },
        { source: 15, target: 16, value: 104.453 },
        { source: 15, target: 14, value: 113.726 },
        { source: 15, target: 17, value: 27.14 },
        { source: 15, target: 12, value: 342.165 },
        { source: 15, target: 18, value: 37.797 },
        { source: 15, target: 19, value: 4.412 },
        { source: 15, target: 13, value: 40.858 },
        { source: 15, target: 3, value: 56.691 },
        { source: 15, target: 20, value: 7.863 },
        { source: 15, target: 21, value: 90.008 },
        { source: 15, target: 22, value: 93.494 },
        { source: 23, target: 24, value: 40.719 },
        { source: 25, target: 24, value: 82.233 },
        { source: 5, target: 13, value: 0.129 },
        { source: 5, target: 3, value: 1.401 },
        { source: 5, target: 26, value: 151.891 },
        { source: 5, target: 19, value: 2.096 },
        { source: 5, target: 12, value: 48.58 },
        { source: 27, target: 15, value: 7.013 },
        { source: 17, target: 28, value: 20.897 },
        { source: 17, target: 3, value: 6.242 },
        { source: 28, target: 18, value: 20.897 },
        { source: 29, target: 15, value: 6.995 },
        { source: 2, target: 12, value: 121.066 },
        { source: 2, target: 30, value: 128.69 },
        { source: 2, target: 18, value: 135.835 },
        { source: 2, target: 31, value: 14.458 },
        { source: 2, target: 32, value: 206.267 },
        { source: 2, target: 19, value: 3.64 },
        { source: 2, target: 33, value: 33.218 },
        { source: 2, target: 20, value: 4.413 },
        { source: 34, target: 1, value: 4.375 },
        { source: 24, target: 5, value: 122.952 },
        { source: 35, target: 26, value: 839.978 },
        { source: 36, target: 37, value: 504.287 },
        { source: 38, target: 37, value: 107.703 },
        { source: 37, target: 2, value: 611.99 },
        { source: 39, target: 4, value: 56.587 },
        { source: 39, target: 1, value: 77.81 },
        { source: 40, target: 14, value: 193.026 },
        { source: 40, target: 13, value: 70.672 },
        { source: 41, target: 15, value: 59.901 },
        { source: 42, target: 14, value: 19.263 },
        { source: 43, target: 42, value: 19.263 },
        { source: 43, target: 41, value: 59.901 },
        { source: 4, target: 19, value: 0.882 },
        { source: 4, target: 26, value: 400.12 },
        { source: 4, target: 12, value: 46.477 },
        { source: 26, target: 15, value: 525.531 },
        { source: 26, target: 3, value: 787.129 },
        { source: 26, target: 11, value: 79.329 },
        { source: 44, target: 15, value: 9.452 },
        { source: 45, target: 1, value: 182.01 },
        { source: 46, target: 15, value: 19.013 },
        { source: 47, target: 15, value: 289.366 }
      ]
    };
    
    sankey.nodes(energy.nodes).links(energy.links).layout(32);
    
    const link = svg
      .append("g")
      .selectAll(".link")
      .data(energy.links)
      .enter()
      .append("path")
      .attr("class", "link")
      .attr("d", path)
      .style("stroke-width", d => Math.max(1, d.dy))
      .sort((a, b) => b.dy - a.dy);
    
    link
      .append("title")
      .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`);
    
    const node = svg
      .append("g")
      .selectAll(".node")
      .data(energy.nodes)
      .enter()
      .append("g")
      .attr("class", "node")
      .attr("transform", d => `translate(${d.x},${d.y})`)
      .call(
        d3
          .drag()
          .subject(d => d)
          .on("start", function() {
            this.parentNode.appendChild(this);
          })
          .on("drag", dragmove)
      );
    
    node
      .append("rect")
      .attr("height", d => d.dy)
      .attr("width", sankey.nodeWidth())
      .style("fill", d => {
        d.color = color(d.name.replace(/ .*/, ""));
        return d.color;
      })
      .style("stroke", "none")
      .append("title")
      .text(d => `${d.name}\n${format(d.value)}`);
    
    node
      .append("text")
      .attr("x", -6)
      .attr("y", d => d.dy / 2)
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .attr("transform", null)
      .text(d => d.name)
      .filter(d => d.x < width / 2)
      .attr("x", 6 + sankey.nodeWidth())
      .attr("text-anchor", "start");
    
    function dragmove(d) {
      d3
        .select(this)
        .attr(
          "transform",
          `translate(${d.x},${(d.y = Math.max(
            0,
            Math.min(height - d.dy, d3.event.y)
          ))})`
        );
      sankey.relayout();
      link.attr("d", path);
    }
    
    const linkExtent = d3.extent(energy.links, d => d.value);
    const frequencyScale = d3.scaleLinear().domain(linkExtent).range([0.05, 1]);
    const particleSize = d3.scaleLinear().domain(linkExtent).range([1, 5]);
    
    energy.links.forEach(link => {
      link.freq = frequencyScale(link.value);
      link.particleSize = 2;
      link.particleColor = d3
        .scaleLinear()
        .domain([0, 1])
        .range([link.source.color, link.target.color]);
    });
    
    const t = d3.timer(tick, 1000);
    let particles = [];
    
    function tick(elapsed, time) {
      particles = particles.filter(d => d.current < d.path.getTotalLength());
    
      d3.selectAll("path.link").each(function(d) {
        // if (d.freq < 1) {
        for (let x = 0; x < 2; x += 1) {
          const offset = (Math.random() - 0.5) * (d.dy - 4);
          if (Math.random() < d.freq) {
            const length = this.getTotalLength();
            particles.push({
              link: d,
              time: elapsed,
              offset,
              path: this,
              length,
              animateTime: length,
              speed: 0.5 + Math.random()
            });
          }
        }
        // }
        /*    
                else {
                  for (var x = 0; x<d.freq; x++) {
                    var offset = (Math.random() - .5) * d.dy;
                    particles.push({link: d, time: elapsed, offset: offset, path: this})
                  }
                } 
            */
      });
    
      particleEdgeCanvasPath(elapsed);
    }
    
    function particleEdgeCanvasPath(elapsed) {
      const context = d3.select("canvas").node().getContext("2d");
    
      context.clearRect(0, 0, 1000, 1000);
    
      context.fillStyle = "gray";
      context.lineWidth = "1px";
      for (const x in particles) {
        if ({}.hasOwnProperty.call(particles, x)) {
          const currentTime = elapsed - particles[x].time;
          // var currentPercent = currentTime / 1000 * particles[x].path.getTotalLength();
          particles[x].current = currentTime * 0.15 * particles[x].speed;
          const currentPos = particles[x].path.getPointAtLength(
            particles[x].current
          );
          context.beginPath();
          context.fillStyle = particles[x].link.particleColor(0);
          context.arc(
            currentPos.x,
            currentPos.y + particles[x].offset,
            particles[x].link.particleSize,
            0,
            2 * Math.PI
          );
          context.fill();
        }
      }
    }
  </script>
</body>

</html>

关于javascript - 带有粒子的D3.js Sankey图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46347159/

文章推荐： php - 我的PHP中找不到的小错误。意外的T_VARIABLE

文章推荐： python - 从另一个函数调用变量

文章推荐： reactjs - 带有React和Babel语法错误的Brunch.io

文章推荐： php - 重定向到我的custom404错误页面php

javascript - Preact 粒子
我正在创建一个使用 tsParticles 的 Preact 组件库，但什么也没有出现。我正在移植 React project但可能有些地方不兼容。您可以在此处 checkout 组件:https
javascript - 粒子.subSelf()未定义不是一个函数
我试图为具有三的粒子提供速度和原点，但我无法添加原点 function getOrigin() { return new THREE.Vector3(Weapon.vehicle.posit
javascript - 粒子(用构造函数创建)在碰撞时扩展和消失
当用户单击任何粒子时，我希望它扩展和淡出，并且在与任何其他粒子碰撞时，该粒子也会扩展和淡出。现在我的问题是我想知道是否有一种方法可以让这些粒子(在本例中由构造函数制成)在碰撞时相互影响。链接至Code
HTML 5 Canvas 粒子
http://www.mrspeaker.net/ 这个人制作了他的整个背景粒子，但我一直在 Inspect Element 中漫游以弄清楚他是怎么做到的，又不能。我不太确定它是如何完成的，有人知道他
CSS 粒子 Js 重叠问题
这是我个人网站的存储库:https://github.com/flakpanzer40/flakpanzer40.github.io 您可能会注意到，我使用的粒子只是显示在我的名字、图片和描述下方。我
javascript - 粒子 JS 问题
我在实现粒子 JS 时遇到了问题。我添加了两个 JS 文件，但在浏览器中没有得到任何输出。这是我的代码。 particles.js 最佳答案您的 b
javascript - 粒子 Js 出现在悬停时
我正在尝试将粒子 js 设置为我网站的背景。我正在尝试应用这个: https://codepen.io/nikspatel/pen/aJGqpv 我尝试将其 css 设置为:position: fix
c++ - OpenGL 粒子，帮助控制方向
我正在尝试修改这个 Digiben 样本，以便获得从一个点(撞击点)产生并向上漂浮的粒子效果，有点像火的 Spark 。样本中的粒子在一个圆圈内旋转......我已经尝试删除余弦/正弦函数并将它们替换
c++ - 生成 GPU 粒子
我正在开发我的第一个游戏引擎，并尝试实现 GPU 粒子系统。我以前在 CPU 上实现过一个，但现在我正在努力提高它的效率。具体来说，我的问题是在一生中产生粒子。由于我正在为粒子引擎处理帧缓冲区纹理，
javascript - Canvas 粒子、碰撞和性能
我正在创建一个网络应用程序，该应用程序具有交互式背景，粒子会四处弹跳。在任何时候，屏幕上都有大约 200 个圆形粒子，最多大约 800 个粒子。为粒子运行的一些碰撞和效果是以下原型(prototype
javascript - THREE.js 粒子/点云
我正在尝试让一些轨道物体留下痕迹。为此，我创建了一个粒子系统，其中包含三个几何体、三个点云和三个点云 Material : particleMaterial = new THREE.PointClou
javascript - 在触发调整大小事件之前，粒子 js 无法正确显示
如上所述，我正在使用 particles.js库，用于向我正在设计的网站上的 div 添加背景。当页面加载时，正确的 div 将动画作为背景，但它总是开始得太“放大”。它似乎使用太大的默认屏幕尺寸，
粒子.js : limit number of particles
我找不到是否可以限制粒子总数。有什么办法吗？ Particles.js Github 最佳答案您可以修改 particles.js(第 750 行)，在推送函数中添加额外的检查: /* -----
ubuntu - 如何从远程计算机运行CUDA/OpenGL互操作(粒子)示例
我正在尝试从主机ubuntu计算机上的远程Ubuntu计算机上运行CUDA粒子示例。我遵循了本教程： http://devblogs.nvidia.com/parallelforall/remote
algorithm - 粒子/遗传群优化算法中的粒子(代码方面)是什么？
编辑嗨，我正在尝试实现粒子(或遗传)群优化。然而，我已经卡在第一步了…… 我对如何初始化粒子以及这些粒子(就代码而言)是什么感到困惑。我已经找到了有关算法(单独)和实现的各种信息，但没有找到我想要的
android - 如何在 Android 上创建下雨效果(粒子)？
我正在开发一个 2d android 策略游戏，它在 SurfaceView 上运行，所以我不能(或者我可以吗？)使用 LibGdx 的粒子系统。我想做一个下雨的效果，我的目标是这样的(http://
java - 粒子 Action 非常快 libgdx java
我正在使用粒子效果，它会到达您单击的位置并且不会停止。当我点击某个地方时，粒子就会相应地移动。然而，当我再次单击时，粒子开始越来越快地发挥其效果，我完全不明白为什么。我假设它在 SpellParent
javascript - 开始使用 JavaScript 中的动画排版/粒子(将粒子映射到单词)？
好吧，我在 HTML 和 CSS 方面拥有丰富的经验，并且在 Javascript 方面也有一些经验(我可以编写基本功能并使用类似的语言进行编码)。我正在寻找一些视觉项目，并且对进入粒子系统特别感兴
c++ - 带有嵌套 for 循环的 vector 粒子 - 未检测到碰撞
所以我有一些粒子(椭圆)在屏幕上跳来跳去。我试图让他们碰撞而不是互相超越。为了做到这一点，我必须循环遍历每个粒子，并将它与每个其他粒子的距离与嵌套在另一个 for 循环中的 for 循环进行比较，然后
python - pygame 粒子 : issues removing from list
我有使用 pygame 绘制的粒子和爆炸类。爆炸代表一堆飞行的粒子。一个粒子最终会消失；当它的 ttl 属性变为 0 时，它不应该是可见的并且应该从 Explosion.particles 中移除。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 带有粒子的D3.js Sankey图