Javascript D3js-从“中”绘制折线图；JSON数据“；使用d3.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]}
]

我希望从从JSON文件检索的数据中显示该行。 我实际上得到了输出， 这是我当前接收到的输出：

但问题是，我希望这更具活力。 例如，如果JSON中有更多的数据

JSON可以从 x1，y1到xn，yn…（类似于上面JSON中的格式）

因此，我与此相关的问题是：

如何使之成为动态的（即：无论JSON中的数据量如何，它都应该在图表上用所需的图形反映出来）

使用D3.JSON输入到D3js的JSON的数据格式会有问题吗？（或者D3.json所需的格式是什么，是否严格？）

---

让JSON文件如下所示

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

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

]

]

[
 [
  {
     "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
  }
 ]
]

得到这条“线”的长度 在FOR循环中运行它。。

---

希望这能解决问题，让您的json数据结构如下

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

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

]

]

[
 [
  {
     "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
  }
 ]
]

代码

---

这是创建多折线图的正确方法。无论从json获得何种数据格式，都可以使用Javascript数组函数将其转换为所需的格式。您也可以使用下划线.js以方便处理。

不完全确定您要查找的内容，但可能会有所帮助。我之前已经检查过了。。但如果您使用的是d3js，您会使用JSON或tsv格式的输入数据吗？其实没关系，我想您可以更容易地生成任何数据。d3多折线图的演示太多了。。请参考它们并尝试使用json文件。如果您仍然面临一些问题，请创建一个SO问题，指定确切的问题。