javascript - 使用 d3 链接(同步)依赖转换-6ren

javascript - 使用 d3 链接(同步)依赖转换

转载作者：行者123 更新时间：2023-12-03 10:42:22

26

4

我正在编写一个小部件，该小部件显示一个值，并且能够在需要时以动画方式呈现新值。数字显示的一部分是显示符号的能力。例如百分比符号 (%)。

我已经能够使用 d3 和颜色正确编码转换。该值完美运行。符号颜色的过渡有效，但符号位置的过渡不同步。

我的示例代码演示了随机值变化。但符号的位置始终是之前的随机值，而不是当前值。

问题的JSFiddle在这里:https://jsfiddle.net/metalskin/ektvL7kj/

代码如下:

<!doctype html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Test Arc Graph</title>
    <style>
      body {
        width: 100%;
        height: 100%;
      }
      .mainDiv {
        width: 100%;
        height: 25%;
        display: block; 
        overflow: hidden;
      }
      .widget {
        width: 25%;
        height: 100%;
        float: left;
      }
      #numWidget {
        width: 100%;
        height: 100%;
      }
    </style>    
</head>
<body>
  <div class="mainDiv">
    <div id="widgetDiv" class="widget" />
  </div>
  <script type="text/javascript" src="js/d3.min.js"></script>
  <script>

    var value = setValue(0, 0, false);

    var svg = d3.select("#widgetDiv").append("svg")
      .attr("id", "numWidget")
      .attr("viewBox", "0 0 100 100")
      .attr("perserveAspectRatio", "meet")
      .append("g");

    var textInst = svg.append("text")
      .attr("id", "numValue")
      .attr("dx", 50)
      .attr("dy", 50)
      .text(value)
      .attr("text-anchor", "middle")
      .attr("dominant-baseline", "central")
      .attr("font-family", "sans-serif")
      .style("font-weight", "bold")
      .style("font-size", "3em")
      .attr("fill", determineForegroundColor(value));

    var symbolInst = svg.append("text")
      .attr("id", "numSymbol")
      .attr("dx", 51 + ( textInst.node().getBBox().width / 2))
      .attr("dy", 53)
      .text("%")
      .attr("text-anchor", "begin")
      .attr("baseline-shift", "super")
      .attr("font-family", "sans-serif")
      .style("font-weight", "bold")
      .style("font-size", "1em")
      .attr("fill", determineForegroundColor(value));

    setInterval(function() {
      var min = -120;
      var max = 120;
      // calc a int random value between min and max
      var newValue = Math.floor(Math.random() * (max - min)) + min;
      value = setValue(value, newValue, true, textInst, symbolInst);
    }, 1500);

    function determineForegroundColor(val) {
      if(val <= 80) {
        return "rgb(100,100,100)";
      } else if(val >= 100) {
        return "rgb(200,50,50)";
      }

      return "rgb(200,200,50)";
    }

    function setValue(oldValue, newValue, redraw, textValueInst, symbolInst) {
      var format = d3.format("f");

      if(redraw) {
        (function(replacementValue, textInst) {
          textInst.transition()
            .duration(750)
            .ease('linear')
            .style("fill", determineForegroundColor())
            .tween('text', function() {
              var ip = d3.interpolate(oldValue, replacementValue);
              return function(t) {
                this.textContent = format(ip(t));
              };
            })
//          .each(function() {
//              d3.select(this);
//              symbolInst
//                .style("fill", determineForegroundColor())
//                .attr("dx", 51 + ( textInst.node().getBBox().width / 2));
//          })
          ;

          symbolInst.transition()
            .duration(750)
            .ease('linear')
            .style("fill", determineForegroundColor())
            .attr("dx", 51 + ( textInst.node().getBBox().width / 2));
        })(newValue, textValueInst);
      }

      return newValue; 
    };    

  </script>  
</body>
</html>

注释掉的代码是使用each的尝试。当取消注释并且注释掉之后的转换时，行为不会改变。我认为通过使用 each 我会在转换期间获得一个 event，这样我就可以根据值文本组件的当前值偏移符号。我发现一些 doco 建议执行 d3.select(this)，但我无法弄清楚问题是什么。

我怀疑使用 each 是正确的方法，只是找不到与我正在做的事情相对应的关于如何使用它的示例或讨论。

最佳答案

您可以在 tween 函数中对文本元素的过渡进行分组并偏移 % 符号。

textInst.transition()
  .duration(750)
  .ease('linear')
  .style("fill", determineForegroundColor())
  .tween('text', function() {
    var ip = d3.interpolate(oldValue, replacementValue);
    return function(t) {                
      this.textContent = format(ip(t));
      symbolInst
        .style("fill", determineForegroundColor())
        .attr("dx", 51 + ( textInst.node().getBBox().width / 2));
    };
  });

这是您的updated fiddle

关于javascript - 使用 d3 链接(同步)依赖转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28715020/

26

4

0

文章推荐： javascript - Chrome/FF 中的对象处理？

文章推荐： database-design - 最佳实践 - 记录事件(一般)和更改(数据库)

文章推荐： javascript - ClientId 导致 NullReferenceException

IMAP 同步
我正在实现 IMAP 客户端，但 IMAP 邮箱同步出现问题。首先，可以从 IMAP 服务器获取新邮件，但我不知道如何从邮箱中查找已删除的邮件。我是否应该从服务器获取所有消息并将其与本地数据进行比
Java-同步
我研究线程同步。当我有这个例子时: class A { public synchronized void methodA(){ } public synchronized void met
Java——同步
嗨，我做了一个扩展线程的东西，它添加了一个包含 IP 的对象。然后我创建了该线程的两个实例并启动它们。他们使用相同的列表。我现在想使用 Synchronized 来阻止并发更新问题。但它不起作用，我
javascript - 同步
我正在尝试使用 FTP 定期将小数据文件从程序上传到服务器。用户从使用 javascript XMLHttpRequest 函数读取数据的网页访问数据。这一切似乎都有效，但我正在努力解决由 FTP 和
JavaScript 同步
我不知道如何同步下一个代码: javascript: (function() { var s2 = document.createElement('script'); s2.src =
Java 同步
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this qu
同步 EDA 框架设计
一点睛 1 Message 在基于 Message 的系统中，每一个 Event 也可以被称为 Message，Message 是对 Event 更高一个层级的抽象，每一个 Message 都有一个
同步 EDA 框架设计
一点睛 1 Message 在基于 Message 的系统中，每一个 Event 也可以被称为 Message，Message 是对 Event 更高一个层级的抽象，每一个 Message 都有一个
jquery - getJSON 同步
目标:我所追求的是每次在数据库中添加某些内容时(在 $.ajax 到 Submit_to_db.php 之后)，从数据库获取数据并刷新 main.php(通过 draw_polygon 更明显)。所
iphone - 同步 CAAnimations
我有一个重复动画，需要与其他一些 transient 动画同步。重复动画是一条在屏幕上移动 4 秒的扫描线。当它经过下面的图像时，这些图像需要“闪烁”。闪烁的图像可以根据用户的意愿来来去去和移动。它
cuda block 同步
我有 b 个块，每个块有 t 个线程。我可以用 __syncthreads() 同步特定块中的线程。例如 __global__ void aFunction() { for(i=0;i #
azure - Azure表实体存在/同步
我正在使用azure表查询来检索分配给用户的所有错误实体。此外，我更改了实体的属性以声明该实体处于处理模式。处理完实体后，我将从表中删除该实体。当我进行并行测试时，可能会发生查询期间，一个实体已
不同机器上的应用程序访问时的 SQLite 同步
我想知道 SQLite 是如何实现它的。它基于文件锁定吗？当然，并不是每个访问它的用户都锁定了整个数据库；那效率极低。它是基于多个文件还是仅基于一个大文件？如果有人能够简要概述一下 sqlite 中
javascript - jquery如何发布到php，同步
我想post到php，当id EmpAgree1时，然后它的post变量EmpAgree=1；当id为EmpAgree2时，则后置变量EmpAgree=2等。但只是读取i的最后一个值，为什么？以及如何
cuda - CUBLAS 同步
CUBLAS 文档提到我们在读取标量结果之前需要同步: “此外，少数返回标量结果的函数，例如 amax()、amin、asum()、rotg()、rotmg()、dot() 和 nrm2()，通过引用
Java RMI 同步
我知道下面的代码中缺少一些内容，我的问题是关于 RemoteImplementation 中的同步机制。我还了解到该网站和其他网站上有几个关于 RMI 和同步的问题；我在这里寻找明确的确认/矛盾。我
java - AOP+同步
我不太确定如何解决这个问题......所以我可能需要几次尝试才能正确回答这个问题。我有一个用于缓存方法结果的注释。我的代码目前是一个私有(private)分支，但我正在处理的部分从这里开始: http
java - java中的线程/同步
我对 Java 非常失望，因为它不允许以下代码尽可能地并发移动。当没有同步时，两个线程会更频繁地切换，但是当尝试访问同步方法时，在第二个线程获得锁之前以及在第一个线程获得锁之前再次花费太长时间(比如
java - Kotlin 同步
过去几周我一直在研究java多线程。我了解了synchronized，并理解synchronized避免了多个线程同时访问相同的属性。我编写此代码是为了在同一线程中运行两个线程。 val gate =
另一个线程内的 Java 同步
我有一个关于 Java 同步的简单问题。请假设以下代码: public class Test { private String address; private int age;

首页

博学

6Ren·AI

商城

javascript - 使用 d3 链接(同步)依赖转换