javascript - D3.js序数多系列折线图: Nan at path-6ren

javascript - D3.js序数多系列折线图: Nan at path

转载作者：行者123 更新时间：2023-12-03 09:32:02

25

4

如果这看起来像是重复的 D3 问题，请道歉。我花了 2 天的时间试图弄清楚如何做到这一点。

我正在尝试创建一个多线图表，其中 x 轴作为序数刻度，y 轴作为正常线性刻度。

数据从外部 JSON 加载:

[
  {
    "arbeitsgang":"A1",
     "y":5,
     "z":4
  },
  {
    "arbeitsgang":"A2",
    "y":6,
    "z":11
  },
  {
     "arbeitsgang":"A3",
     "y":4,
      "z":45
  }
]

这是我为尝试创建图表而编写的内容:

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

 body { font: 12px Arial;}

 path {
  stroke: steelblue;
  stroke-width: 2;
   fill: none;
}

.axis path,
.axis line {
     fill: none;
     stroke: #000;
      shape-rendering: crispEdges;
 }

.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
 }

 </style>
 <body>

 <!-- load the d3.js library -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js">      </script>
  <script>

 var margin = {
     top: 20,
right: 20,
bottom: 20,
left: 50
},
 width = 600 - margin.left - margin.right,
 height = 300 - margin.top - margin.bottom;

 var x = d3.scale.ordinal().rangeRoundBands([0, width],0.1);
 var y = d3.scale.linear().rangeRound([height, 0]);

 var ordinalScale = d3.scale.ordinal();

 var xAxis = d3.svg.axis()
             .scale(x)
              .orient("bottom");

  var yAxis = d3.svg.axis()
     .scale(y)
      .orient("left");

  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

   var line = d3.svg.line()
         .x(function(d) { return x(d.arbeitsgang); })
          .y(function(d) { return y(d.koordinaten); });

    d3.json("Arbeitsgang.json", function(error, data) {

ordinalScale.domain(d3.keys(data[0]).filter(function(key) { return key !== "arbeitsgang"; }));

data.forEach(function(d) {
            d.arbeitsgang = d.arbeitsgang;
            d.y = +d.y;
            d.z = +d.z;

});

var arbeitsgange = ordinalScale.domain().map(function(name) {
    return {
        name: name,
        values: data.map(function (d) {
            return {arbeitsgang: d.arbeitsgang, koordinaten: +d[name]};
        })
    }
});

x.domain(d3.extent(data, function(d) { return d.arbeitsgang; }));
y.domain([
    d3.min(arbeitsgange, function(c) { return d3.min(c.values, function(v) { return v.koordinaten; }); }),
    d3.max(arbeitsgange, function(c) { return d3.max(c.values, function(v) { return v.koordinaten; }); })
]);

svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

var graphen = svg.selectAll(".graphen")
        .data(arbeitsgange)
        .enter().append("g")
        .attr("class", "graphen");

graphen.forEach(function(d) {
    console.log(d);
});

graphen.append("path")
        .attr("class", "line")
        .attr("d", function(d) { return line(d.values)});

 });


</script>
</body>

所以似乎有两个错误: 1. x 轴只有 2 个刻度(A1、A3)，但缺少 A2 2.没有可见的图表。使用 html dom profiler 你可以看到有 2 个图表:

   <path class="line" d="M26,254LNaN,247L278,260"/>
   <path class="line" d="M26,260LNaN,216L278,0"/>

正如你所看到的，里面有一些带有 NaN 的东西。可能是解析的时候出错了。我根本不知道。

感谢您的帮助

最佳答案

当我们使用“rangeRoundBands”作为 x 轴刻度时var x = d3.scale.ordinal().rangeRoundBands([0, width],0.1); ,

我们需要设置所有点的域，我确实喜欢这个

x.domain(['A1','A2','A3']/*d3.extent(data, function(d) { return d.arbeitsgang; })*/);

完成这个link和工作fiddle .

关于javascript - D3.js序数多系列折线图: Nan at path，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31474476/

25

4

0

文章推荐： javascript - 下拉更改加载时 knockout 火订阅

文章推荐： nginx - Nginx删除WWW并同时回应

文章推荐： angularjs - 在 angular ui-router URL 中添加可选属性

文章推荐： javascript - VKontakte Javascript SDK 用户电子邮件

支持移动点的iOS库(折线图)
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
【matplotlib实战】--折线图
折线图是一种用于可视化数据变化趋势的图表，它可以用于表示任何数值随着时间或类别的变化。折线图由折线段和折线交点组成，折线段表示数值随时间或类别的变化趋势，折线交点表示数据的转折点。折
typescript 折线图 d3
我是 d3 和 typescript 的新手。我正在尝试使用 d3 v4 和 typescript 创建一个简单的折线图。但是，我收到了一个 typescript 错误，如下图所示: 问题是什么？
Qlikview 折线图，在时间段维度上具有多个表达式
我是 Qlikview 的新手，经过几次失败的尝试后，我不得不请求一些有关 Qlikview 中图表的指导。我想创建折线图，其中包含: 一维 - 一个月的时间段按天数分割一个表达式 - 每天创建的任
java - Android 折线图
我正在尝试使用 Firebase 实时数据库中的数据在 Android 中制作折线图。这是数据库的结构: enter image description here 这是代码: public clas
sql - SSRS基于相同数据类型的多条线 - 折线图
我有一个 TSQL 查询，它提供了一些性能基线的一个月数据。我用折线图显示数据。现在我想在报告中添加更多参数，以提供从两个不同月份选择数据的选项，并将其显示在同一个折线图中以进行比较。我不知道如何开始
R 折线图 - 删除与数据无关的令人烦恼的零线
我有一个简单(但非常大)的数据集，其中包含从 4 月到 8 月在不同站点进行的计数。在 4 月中旬和 7 月之间，没有零计数 - 但零线从最早到最晚的日期延伸。以下是用于制作上述图表的部分数据(列
c# - 折线图 - 更改边框宽度会删除空间
我正在创建一个折线图，我想在不改变线条长度的情况下增加线条的高度或厚度。在增加宽度属性之前，它看起来像这样: 增加宽度属性后，它看起来像这样: 我只想增加 height，但是没有这样的属性，所以我尝
具有值的 JavaFX 折线图
我想在折线图的顶部显示值。我看过this answer这很有帮助，但它改变了折线图节点。我想要的是相同的想法，但不在节点上显示值，而是在它们附近(可能在它们的右侧和上方)显示值，例如:
php - MYSQL转Google图表(折线图)
我正在尝试使用谷歌图表以折线图的形式显示mysql数据。我认为问题出在我尝试格式化谷歌图表数据的部分。我的代码有什么问题吗？ $sth = mysql_query("SELECT * FROM rea
JavaFX CSS 折线图
我有 JavaFX LineChart 和一些带有 XYChart.Series 对象的数据 XYChart.Series series = new XYChart.Series(); series.
python - 模式匹配或比较两个图形(折线图)
给定: 理想图 - 描绘了我的机器应该具有的预期读数。实际图表 - 描述我的机器在该实例中的实际读数。 X轴:来自机器的力(N) Y 轴:时间这两个图都是使用 python 中的 pyplot 库创
javascript - 类似谷歌的股票图表/折线图
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 6 年前。
ASP生成柱型体，折线图，饼图源代码
<% function table2(total,table_x,table_y,all_width,all_height,line_n
r - 根据分类变量过滤 plotly 折线图
我想根据数据中的一列离散值过滤使用 plotly 创建的图表。最终目标是能够使用按钮来更新过滤值，所以我不想事先过滤数据。 library(plotly) df % filter(group1=
linechart - 带有日期轴的 javafx 折线图
我正在尝试在 JavaFX 中创建折线图。此折线图应该有一个轴 (y) 与数字和另一个轴 (x) 与日期。日期范围应该由用户使用两个日期选择器来选择。现在这是我的问题:折线图只有类别和数字轴。有什么方
javascript - 无法将日期传递给 nivo 折线图
我正在使用 nivo 折线图，并希望将 x 轴用作时间线，最多一分钟。不幸的是，我无法呈现该图表，因为它无法正确读取日期。例如，这是我的数据的一部分: { x: "2020-04-24T13:07:
raphael - 有没有办法将网格线添加到 gRaphael 折线图？
我有一个用 gRaphael 创建的折线图。它有轴和刻度线，但我想要网格线。是否有内置的方法来实现这一点或可以帮助我的附加库？最佳答案 gRaphael 没有添加网格线的内置方法，但绘制它们非常容易
.net - 数据表中的 OpenXML 折线图
我正在生成一份报告，该报告是根据查询字符串在网页的页面加载时生成的。我在电子表格中生成的单元格数据完全符合我的要求。现在我需要添加一个折线图。数据是动态的，行数会有所不同。搜索后没有信息，这与在 .
javascript - 从未知数量的点初始化 Highcharts 折线图
我正在尝试使用 highcharts 中每 x 秒更新一次的折线图。理想情况下，我希望它使用一些特定数据进行初始化，并每 x 秒轮询一次 Web 服务，并进行相应更新。目前，我只是尝试使用网络服务中

首页

博学

6Ren·AI

商城

javascript - D3.js序数多系列折线图: Nan at path