score:3

Accepted answer

Let your json data structure be like this

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

This is the right way of creating a multi line chart. Whatever the data format you get from json, you can convert it to the required format using Javascript array functions. You can also use Underscore.js for easy processing.

score:0

let the JSON file be like this

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

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

]

]

and get the length of this "line" run it in a forloop.. hope that will solve


Related Query