javascript - 来自“动态”数据 JSON 值的多折线图

Question

我对 D3 相当陌生，并试图从动态 JSON 值创建折线图。我的 JSON 目前看起来像这样：

{
 "rows": [
  {
  "ts": "2018-10-29T23:45:00-04:00 New_York",
  "v0": "68.44398498535156 °F",
  "v1": "69.8637466430664 °F",
  "v2": "70.54344940185547 °F",
  "v3": "69.80231475830078 °F",
  "v4": "66.51739501953125 °F",
  "v5": "71.56026458740234 °F"
  },
  {
  "ts": "2018-10-30T00:00:00-04:00 New_York",
  "v0": "68.3259048461914 °F",
  "v1": "69.73896026611328 °F",
  "v2": "70.41132354736328 °F",
  "v3": "69.67794036865234 °F",
  "v4": "66.24201965332031 °F",
  "v5": "71.42134094238281 °F"
  }
 ]
}

我可以有尽可能少的一个和尽可能多的。名称始终以v0开头并针对每个值进行迭代。我不知道如何开始循环遍历每一个并为每个v值绘制一条新线。

d3.json(removedJsonUri, function(error, d) {

    var data = d.rows;
    var keys = [];
    var lines = [];

    data.forEach((item) => {
        keys = Object.keys(item);
        Object.entries(item).forEach(([key, val]) => {
            if(key == "ts"){
                item[key] = new Date(item[key].replace('-04:00 New_York',''));
            } else {
               item[key] = item[key].replace('°F','');
            }
        });
    });

  if (error) throw error;

  var svg = d3.select("svg"),
      margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom,
      g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");



  var x = d3.scaleTime()
      .rangeRound([0, width]);

  var y = d3.scaleLinear()
      .rangeRound([height, 0]);

  keys.shift();

  for(var i = 0, length = keys.length; i < length; i++){
    var k = "line" + keys[i];
    window[k] = d3.line()
      .x(function(d) { return x(d.ts); })
      .y(function(d) { return y(d[keys[i]]); });


    lines.push(k);
      console.log(lines);
  }

  x.domain(d3.extent(data, function(d) { return d.ts; }));
  y.domain([0, d3.max(data, function(d) {
      return Math.max(d.v0, d.v1); })]);

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Temp (°F)");

  for(var o = 0, length = lines.length; o < length; o++){  

    g.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", lines[o]);
  }

});

这就是我已经走了多远，这在我的脑海中是有道理的，但它不会画出任何线条。我到处都在使用一致的值名称。我知道我错过了一些非常容易的事情，我只是卡住了。

谢谢

标签： javascriptd3.js