D3.js" TypeError:groupData未定义"在嵌套的json数据线图中

时间:2015-07-28 11:37:49

标签: javascript json d3.js linechart

在使用d3.js

解析折线图时,我需要帮助

首先,我想显示我的JSON文件:

[
{
    "Paket": [
        {
            "farbe": "#ff0000",
            "Koordinaten": [
                {
                    "paketaufenthaltsort": " ",
                    "y": "5",
                    "x": "0"
                },
                {
                    "paketaufenthaltsort": "469/31 A 1; A 3; A 4",
                    "y": "5",
                    "x": "150"
                },
                {
                    "paketaufenthaltsort": "469/31 A 1; A 3; A 4",
                    "y": "0",
                    "x": "150"
                }
            ],
            "Paketnummer": "11000005"
        }
    ],
    "offset": "5",
    "referenzzeitraum": "1440"
}
]

所以现在我想要一个带

的折线图

X轴:paketaufenthaltsort y轴:y 用颜色:farbe

所以我尝试了以下内容:

 d3.select("body").select("svg").remove();

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

  var x = d3.scale.ordinal().rangeRoundPoints([0, width], 0);

  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).attr("id", "svg").append("g")
      .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

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

    var data;
   d3.json("/fls2/rest/paketVerlaufChart", function(error, json) {

if (error) return console.warn("Error: " + error);
data = json;

var orte;
var pakete;
var koordinaten;

data.forEach(function(d) {
  d.Paket.forEach(function(p) {
    orte = p.Koordinaten.map(function(k) {
      return k.paketaufenthaltsort;
    });
  });
});

pakete = data.map(function(d) {
  return d.Paket;
});

data.forEach(function(d) {
  koordinaten = d.Paket.map(function(p) {
    return p.Koordinaten;
  });
});

x.domain(orte);

y.domain([d3.min(data, function(c) {
  return d3.min(c.Paket, function(v) {
    return d3.min(v.Koordinaten, function(l) {
      return l.y;
    });
  });
}), d3.max(data, function(c) {
  return d3.max(c.Paket, function(v) {
    return d3.max(v.Koordinaten, function(l) {
      return l.y;
    });
  });
}), ]);

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(koordinaten).enter().append("g")
        .attr("class", "graphen");
graphen.attr("stroke", function(d) {
  console.log(d.x);
  return (d.farbe);
}).data(pakete.Koordinaten).enter().append("path").attr("class", "line")
        .attr("d", function(d) {
          console.log(d);
          return line(d);
        });


  });

如果我调试,则会出现" TypeError:groupData未定义" 所以我需要来自pakete的farbe和来自pakete的koordinaten.Koordinaten

所以这是JSFIddle: http://jsfiddle.net/thomas190393/r0pdsp9s/1/

怎么了?

请帮帮我。

0 个答案:

没有答案