D3js - 使用 d3.json 从“JSON 数据”输入绘制折线图

我最近开始学习 D3.js 并遇到了一些问题.. 这是我到目前为止所尝试过的：

这是我的JS :

    d3.json("../js/sample2.json", function(data) {
    var canvas = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 500)
            .attr("border", "black")

    var group = canvas.append("g")
            .attr("transform", "translate(100,10)")

    var line = d3.svg.line()
            .x(function(d, i) {
                return data[0].position[i];
            })
            .y(function(d, i) {
                return data[1].position[i];
            });

    var line1 = d3.svg.line()
            .x(function(d, i) {
                return data[2].position[i];
            })
            .y(function(d, i) {
                return data[3].position[i];
            });

    var j = 0;
    group.selectAll("path")
            .data(data).enter()
            .append("path")
//    Have to provide where exaclty the line array is ! (line(array)) 
            .attr("d", line(data[j].position))
            .attr("fill", "none")
            .attr("stroke", "green")
            .attr("stroke-width", 3);

    var group2 = group.append("g")
            .attr("transform", "translate(100,10)")
    group2.selectAll("path")
            .data(data).enter()
            .append("path")
//    Have to provide where exaclty the line array is ! (line(array)) 
            .attr("d", line1(data[j].position))
            .attr("fill", "none")
            .attr("stroke", "red")
            .attr("stroke-width", 3);
});

这是我的 JSON 文件：

   [ {"name": "x1", 
      "position":[40,60,80,100,200]
     },

     {"name": "y1", 
      "position":[70,190,220,160,240]},

     {"name": "x2", 
      "position":[40,60,80,100,200]
     },

     {"name": "y2", 
      "position":[20,90,20,60,40]}
]

I want the line to be displayed from the data that is retrieved from the JSON file. I actually got the output, This is my current output that am receiving:

但问题是，我希望这更加动态。 例如如果还有更多数据在 JSON 中。

JSON 可以来自 x1,y1 到 xn,yn...（类似于上面 JSON 中的格式）

[ {"name": "x1", 
      "position":[40,60,80,100,200]
     },
 {"name": "y1", 
  "position":[70,190,220,160,240]
  },

 {"name": "x2", 
  "position":[40,60,80,100,200]
 },

 {"name": "y2", 
  "position":[20,90,20,60,40]}
.
.
.
.    


{"name": "xn", 
  "position":[40,60,80,100,200]
 },

 {"name": "yn", 
  "position":[20,90,20,60,40]}]

所以我与此相关的问题是：

1. 这是怎么做到的dynamic（即：无论 JSON 中的数据量有多少，它都应该反映在具有所需图形的图表上）
2. Is the JSON 的数据格式使用以下命令输入到 D3jsD3.json会有问题吗？ （或者 D3.json 所需的格式到底是什么？是否严格？）

让你的json数据结构是这样的

[
 [
  {
     "x":40,
     "y":70
  },
  {
     "x":60,
     "y":190
  },
  {
     "x":80,
     "y":220
  },
  {
     "x":100,
     "y":160
  },
  {
     "x":200,
     "y":240
  }
 ],
 [
  {
     "x":40,
     "y":20
  },
  {
     "x":60,
     "y":90
  },
  {
     "x":80,
     "y":20
  },
  {
     "x":100,
     "y":60
  },
  {
     "x":200,
     "y":40
  }
 ]
]

Code

d3.json("data.json", function(data) {
   var canvas = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .attr("border", "black")

   var group = canvas.append("g")
        .attr("transform", "translate(100,10)")

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

   group.selectAll("path")
        .data(data).enter()
        .append("path")
        .attr("d", function(d){ return line(d) })
        .attr("fill", "none")
        .attr("stroke", "green")
        .attr("stroke-width", 3);
});

这是创建多折线图的正确方法。无论您从 json 获得什么数据格式，都可以使用 Javascript 数组函数将其转换为所需的格式。您还可以使用 Underscore.js 来轻松处理。