D3.js顺序多系列折线图：路径中的Nan

Question

Please apologies if this seems like a duplicate D3 question. 如果这似乎是重复的D3问题，请深表歉意。 I've spent 2 days trying to figure out how to do this. 我花了2天的时间来弄清楚该如何做。

I'm trying to create a multi-line chart with the x-axis as an ordinal scale, and the y axis as a normal linear scale. 我正在尝试创建一个多折线图，其中x轴为有序刻度，y轴为法线线性刻度。

Data is loaded from external JSON: 数据是从外部JSON加载的：

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

And here's where I've written for trying to create the chart: 这是我为尝试创建图表而写的内容：

<!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>

So there seems to be 2 mistakes: 1. x-axis only got 2 ticks ( A1, A3) but A2 is missing 2. there is no graph visible. 因此，似乎有2个错误：1. x轴仅获得2个刻度（A1，A3），但缺少A2 2.没有可见的图形。 With html dom profiler you can see that there are 2 graphs: 使用html dom profiler，您可以看到有2个图形：

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

As you can see there is something with NaN inside. 如您所见，其中包含NaN。 Maybe it is an error while parsing. 解析时可能是错误。 I simply don't know. 我根本不知道。

Thanks for your help 谢谢你的帮助

Answer 1

While we are using 'rangeRoundBands' for x axis scale var x = d3.scale.ordinal().rangeRoundBands([0, width],0.1); 当我们对x轴比例使用'rangeRoundBands'时， var x = d3.scale.ordinal().rangeRoundBands([0, width],0.1); , ，

we need to set domain with all the points, I did like this 我们需要设置所有要点的域，我确实是这样

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

Go through with this link and the working fiddle . 通过此链接和有效的小提琴进行检查。

D3.js顺序多系列折线图：路径中的Nan

问题描述

1 个解决方案

解决方案1
1 2015-07-17 12:16:41

D3.js顺序多系列折线图：路径中的Nan

问题描述

1 个解决方案

解决方案1 1 2015-07-17 12:16:41

解决方案1
1 2015-07-17 12:16:41