javascript - d3js 多线图正在从绘图区域绘制 - 更新模式是否存在问题？-6ren

javascript - d3js 多线图正在从绘图区域绘制 - 更新模式是否存在问题？

转载作者：行者123 更新时间：2023-11-28 12:28:29

我创建了一个多折线图，它绘制了多组线对 - 尽管我不确定我是在正确地更新线还是以最 d3 的方式更新线。使用新数据更新现有路径的正确方法是什么？我使用 setinterval 来模拟新数据的到达。

我遇到的另一个问题是所有线条都不是在实际的绘图区域上绘制的——它们似乎从图表的左侧开始。我已经检查了 x 刻度，它有正确的数据日期，所以不确定到底发生了什么，并且会重视一些输入。我已经厌倦了手动将 x 域设置为一些硬编码日期并且它移动了行但是肯定这是不对的。我不确定这是否与更新内容有关，因为 x 和 y 比例得到更新但路径没有。

所以我的问题是因为我不确定它们是否相互关联:

1) 如何修复线条的绘制？

2) 我对两条线的更新是否正确？

<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <title>my plots!</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <!-- load the d3.js library -->
  <style>
    /* set the CSS */
    
    body {
      font: 12px Arial Bold;
    }
    
    .graph-svg-component {
      background-color: white;
    }
    
    .line {
      fill: none;
      stroke-width: 3px;
    }
    
    .rawline {
      fill: none;
      stroke-width: 3px;
    }
    
    .raw2line {
      fill: none;
      stroke-width: 10px;
      opacity: 0.4;
    }
  </style>
</head>

<body>
  <h1> plot</h1>
  <div id="graphDiv"></div>
  <!-- css FIll none is important so that its just a line and not an area -->

  <script>
    var data_set = [{
        'Asset_Date': '2009-03-23',
        'Raw': 25,
        'Raw2': 25,
        'Asset': 'A'
      },
      {
        'Asset_Date': '2009-03-24',
        'Raw': 28,
        'Raw2': 25.4,
        'Asset': 'A'
      },
      {
        'Asset_Date': '2009-03-25',
        'Raw': 26,
        'Raw2': 25.37,
        'Asset': 'A'
      },
      {
        'Asset_Date': '2009-03-26',
        'Raw': 22,
        'Raw2': 25.03,
        'Asset': 'A'
      },
      {
        'Asset_Date': '2009-03-27',
        'Raw': 19,
        'Raw2': 24.42,
        'Asset': 'A'
      },
      {
        'Asset_Date': '2009-03-28',
        'Raw': 23,
        'Raw2': 24.28,
        'Asset': 'A'
      },
      {
        'Asset_Date': '2009-03-23',
        'Raw': 30,
        'Raw2': 30,
        'Asset': 'B'
      },
      {
        'Asset_Date': '2009-03-24',
        'Raw': 31,
        'Raw2': 33,
        'Asset': 'B'
      },
      {
        'Asset_Date': '2009-03-25',
        'Raw': 32,
        'Raw2': 34,
        'Asset': 'B'
      },
      {
        'Asset_Date': '2009-03-26',
        'Raw': 33,
        'Raw2': 35,
        'Asset': 'B'
      },
      {
        'Asset_Date': '2009-03-27',
        'Raw': 34,
        'Raw2': 36,
        'Asset': 'B'
      },
      {
        'Asset_Date': '2009-03-28',
        'Raw': 37,
        'Raw2': 39,
        'Asset': 'B'
      }
    ]

    var margin = {
      top: 30,
      right: 50,
      bottom: 30,
      left: 50
    };

    var svgWidth = 800;
    var svgHeight = 800;
    var graphWidth = svgWidth - margin.left - margin.right;
    var graphHeight = svgHeight - margin.top - margin.bottom;
    var parseDate = d3.timeParse("%Y-%m-%d");

    var x = d3.scaleTime().range([0, graphWidth]);
    var y = d3.scaleLinear().range([graphHeight, 0]);

    var z = d3.scaleOrdinal(d3.schemeCategory10); // for colours

    var xAxis = d3.axisBottom().scale(x).ticks(10);
    var yAxis = d3.axisLeft().scale(y).ticks(20);

    // Need to create the lines manually for each bit of data
    // Line for raw value
    var line = d3.line()
      .x(function(d) {
        return x(d.Asset_Date);
      })
      .y(function(d) {
        return y(d.Raw);
      });

    // Line for raw2 value
    var line2 = d3.line()
      .x(function(d) {
        return x(d.Asset_Date);
      })
      .y(function(d) {
        return y(d.Raw2);
      });

    // Creates the SVG area within the div on the dom 
    // Just doing this once 
    var svg = d3.select("#graphDiv")
      .append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight)
      .attr("class", "graph-svg-component");
    var g = svg.append("g")
      .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")")
      .call(d3.zoom().on("zoom", function() {
        svg.attr("transform", d3.event.transform)
      }));


    // // Add the X Axis
    g.append("g").attr("class", "x axis")
      .attr("transform", "translate(0," + graphHeight + ")")
      .call(xAxis);
    // Text label for x axis 
    g.append("text")
      .style("text-anchor", "middle")
      .text("timeseries dates")
      .attr("transform", "translate(" + (graphWidth / 2) + " ," + (graphHeight + margin.top) + ")");

    // // Add the Y Axis
    g.append("g")
      .attr("class", "y axis")
      .call(yAxis);
    // text label for the y axis
    g.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x", 0 - (graphHeight / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("price points");

    function drawGraph(data_set) {
      console.log('Dataset contains', data_set.length, 'item(s)')

      data_set = data_set.map(function(d) {
        return {
          Asset: d.Asset,
          Asset_Date: parseDate(d.Asset_Date),
          Raw: +d.Raw,
          Raw2: +d.Raw2
        };
      });

      // Keying data on Asset for easy grouping
      var nested = d3.nest()
        .key(function(d) {
          return d.Asset;
        })
        .entries(data_set);

      // Set X domain to min and max of date from data set
      min1 = d3.min(nested, function(d) {
        return d3.min(d.values, function(d) {
          return d.Asset_Date;
        });
      });
      max1 = d3.max(nested, function(d) {
        return d3.max(d.values, function(d) {
          return d.Asset_Date;
        });
      });
      console.log(min1)
      console.log(max1)
      console.log(d3.extent([min1, max1]))
      x.domain(d3.extent([min1, max1]));

      y.domain([
        d3.min(nested, function(d) {
          return d3.min(d.values, function(d) {
            return Math.min(d.Raw, d.Raw2);
          });
        }),
        d3.max(nested, function(d) {
          return d3.max(d.values, function(d) {
            return Math.max(d.Raw, d.Raw2);
          });
        })
      ]);

      // for colours - by asset as they are grouped 
      var color = d3.scaleOrdinal(d3.schemeCategory10)
        .domain(d3.keys(nested[0])
          .filter(function(key) {
            return key === "Asset";
          }));


      // Update the axis
      svg.selectAll('.x.axis').call(xAxis);
      svg.selectAll('.y.axis').call(yAxis);

      // Join data 
      var city = svg.selectAll(".city").data(nested, function(d) {
        console.log(d);
        return d.key;
      })
      console.log(city)
      // Remove old elements as needed
      city.exit().transition().duration(750).remove()

      // Add a new group per category we have - aka new elements   
      var cityEnter = city.enter().append("g").attr("class", "city");

      // Add line for raw value 
      cityEnter.append("path")
        .attr("class", "rawline")
        .attr("fill", "none")
        .transition()
        .duration(500)
        .style("stroke", function(d) {
          return color(d.key);
        })
        .attr("d", function(d) {
          console.log("update rawline path");
          return line(d.values);
        });

      // Add line for raw2 value 
      cityEnter.append("path")
        .attr("class", "raw2line")
        .attr("fill", "none")
        .transition()
        .duration(500)
        .style("stroke", function(d) {
          return color(d.key);
        })
        .attr("d", function(d) {
          console.log("update raw2line path");
          return line2(d.values);
        });

      var t1 = city.transition();
      // Doing the update the lines with new data 

      t1.select(".rawline").attr("d", function(d) {
        return line(d.values);
      });
      t1.select(".raw2line").attr("d", function(d) {
        return line2(d.values);
      });
    }


    // display initial chart
    window.onload = drawGraph(data_set)
    //Push new data every 5 seconds for a specific date
    var h = setInterval(function() {
      data_set.push({
        'Asset_Date': '2009-03-29',
        'Raw': Math.floor(Math.random() * 50),
        'Raw2': Math.floor(Math.random() * 25),
        'Asset': 'A'
      }, {
        'Asset_Date': '2009-03-30',
        'Raw': Math.floor(Math.random() * 50),
        'Raw2': Math.floor(Math.random() * 25),
        'Asset': 'A'
      }, {
        'Asset_Date': '2009-03-31',
        'Raw': Math.floor(Math.random() * 50),
        'Raw2': Math.floor(Math.random() * 25),
        'Asset': 'A'
      }, {
        'Asset_Date': '2009-04-01',
        'Raw': Math.floor(Math.random() * 50),
        'Raw2': Math.floor(Math.random() * 25),
        'Asset': 'A'
      }, {
        'Asset_Date': '2009-04-02',
        'Raw': Math.floor(Math.random() * 50),
        'Raw2': Math.floor(Math.random() * 25),
        'Asset': 'A'
      }, {
        'Asset_Date': '2009-04-03',
        'Raw': Math.floor(Math.random() * 50),
        'Raw2': Math.floor(Math.random() * 25),
        'Asset': 'A'
      });
      console.log('Redrawing')
      drawGraph(data_set);
      clearInterval(h); //doing this so that it doesnt spam - if i uncomment this, it will keep spamming new lines
    }, 5000);
  </script>
</body>

</html>

非常感谢对上述问题的一些帮助 - 如果您需要更多详细信息 - 请与我们联系!非常感谢!

最佳答案

您正在执行 select 更新行，select 只会选择第一个出现的地方，将其替换为 selectAll 将解决你的问题。

当您为轴使用边距时，您可以将 translate 设置为您的 .city 组。因此，当您附加 g 时，它看起来像这样:

var cityEnter = city.enter().append("g")
   .attr("transform", "translate(" + margin.left + ", 0)")
   .attr("class", "city");

这是一个 jsfiddle: https://jsfiddle.net/wt6vkj82/

关于javascript - d3js 多线图正在从绘图区域绘制 - 更新模式是否存在问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59037989/

文章推荐： ios - 调用函数一段时间然后调用另一个函数 - NSTimer

文章推荐： JavaScript 正则表达式替换除第一个和最后一个之外的内容

mysql - 连接的子查询(存在/存在)
SELECT *, `o_cheque_request.member_id`, `o_cheque_request.wallet_id` FROM `o_cheque_request`, `o_mem
SQL查找是否"存在"，别再count了！
根据某一条件从数据库表中查询『有』与『没有』，只有两种状态，那为什么在写SQL的时候，还要**SELECT count(*)**呢？无论是刚入道的程序员新星，还是精湛沙场多年的程序员老白，都是一如
c# - 存在、读写只需一步
我试图找出一个文件是否存在，如果存在，验证css样式是否已经存在，如果不存在，将它们写在文件末尾... 我已经完成了这一切，但分 3 个步骤: 该文件是否存在？ FileInfo fi= new Fi
android - 如何检测iOS用户或Android用户是否“存在”？
我们正在开发即时消息传递应用程序，并且需要在用户的化身上用绿点显示用户 friend 的“状态”。 “状态”远远超出了“my_app_is_opened_and_on_focus”，这意味着(我猜可能
SQL 查询不存在，存在
模式 Movie(title, year, director, budget, earnings) Actor(stagename, realname, birthyear) ActedIn(stag
MySQL 触发器语法错误 IF 存在
我有一个正在尝试创建的 MySQL 触发器，但无法获得正确的语法。触发器应该遍历一组关键字并将其与插入数据库的新帖子的标题进行匹配。如果找到匹配项，它应该将新帖子分配给该存储桶并更新存储桶的关键字集
MYSQL 选择子查询 IF 存在
我有 3 个表......用户、更新和碰撞。我想向发出 api 请求的用户返回最新订单的 feed 更新，并提供显示 feed 中每个状态所需的所有数据。我还需要包括更新是否已被发出 api 请求的
ios - UIViewController 存在
我正在尝试呈现一个带有 UIView 的 UIViewController。以下是我在 viewDidLoad 方法中尝试的代码。 //create the view controller UIVi
mysql - 如何在一个查询中进行多个计数/存在？
我正在努力弄清楚如何在不对 mysql 进行两次调用的情况下从一个表中检查两件事。我有一个 Members 表。我想测试MemberID 列中是否存在某个值，以及PhoneNumber 列中是否存在
vba - 循环没有 Do 错误但 Do 存在
以下代码给出了一个没有 Do Compile 错误的循环: Loop Sheets("Snap").Rows(1).AutoFilter Field:=5, Criteria1:=List
dns - 域名通过 "dig"存在
是否可以通过检查“dig”的输出来检查域名的存在？在绑定(bind)源中，我发现了这些常量: 0 DNS_R_NOEROR 1 DNS_R_FORMERR 2 DNS_R_SERVFAIL 3 DN
php - Controller 存在，但找不到页面
Controller 有问题我在 Windows 上使用服务器，一切正常，但在互联网上我试图访问页面 social_apartament/beauty_life/并且找不到该页面，代码错误 404这
d - 存在 `static if`时如何生成文档
/** This is struct S. */ struct S(T) { static if(isFloatingPoint!T) { /// This version works
clojure - 类型删除如何帮助 Clojure 存在？
JVM 类型删除如何帮助 Clojure？没有它，Clojure 还能存在吗？如果 JVM 有具体化的类型会发生什么？也就是说，Clojure 将如何改变？最佳答案 Clojure 根本不会有太大变
c - 为什么 system() 存在？
许多论文等提到对“system()”的调用是不安全且不可移植的。我不反对他们的论点。不过，我注意到许多 Unix 实用程序都有一个等效的 C 库。如果没有，源可用于各种这些工具。虽然许多论文和此类
javascript - js如何让一个变量值根据用户登录 Node 存在
在我的 Node js 应用程序中，我有一个用户登录 api。上面我在服务器端代码中创建了一个名为 customerid 的变量。现在，当用户身份验证成功时。我将他的 userid 值存储在我的 cu
azure - 存在 DNS 详细信息时重用资源管理器模板
我有一个工作资源管理器组，由 Ubuntu 14.04 虚拟机、网络接口(interface)、公共(public) IP 地址和存储帐户组成。我已经从这组资源中创建了一个模板。当我尝试部署这组资源
javascript - 存在 javascript 循环引用问题
我有一个函数createminor4(arr，锦标赛)它基本上将arr分成4组，每组8人，然后将它们一次交换到tourney 1组。从那里它插入四个{}，其中有 4 个带有空数组的键。我已经在 Ch
r - 存在 2 个图例时如何更改图例点的大小
我有一个图表，其中有两个图例。我需要更改其中一个图例的点的大小。我需要更改图例中“市场类型”的项目符号大小。我使用示例 here但不适用于我的图表。我的代码如下: k <- ggplot(subs
javascript - 存在 jQuery 字符串比较问题
我有 fiddle here展示我正在尝试做的事情。我有一个动态生成的表，因此列可以按用户选择的任何顺序显示。因此，我尝试获取两个特定 header 的索引，以便可以将 CSS 类添加到这两列以供稍

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - d3js 多线图正在从绘图区域绘制 - 更新模式是否存在问题？