D3.js / Как нарисовать многосерийный график с массивом данных из файла JSON?

Question

Я хочу запрограммировать график рассеяния, подобный этому https://bl.ocks.org/MettiHoof/raw/4ec91624da6f642004e6167184ff8250/ (со временем по оси)

Но я заблокирован при извлечении данных.Это мои данные в формате JSON, мне нужно извлечь 28 температурных списков и нарисовать их для одной даты:

{
"Session_test": [{
    "datas_lines": [{
            "datas_line": [],
            "log_time": "No data"
        },
        {
            "datas_line": [],
            "log_time": "No data"
        },
        {
            "datas_line": [],
            "log_time": "No data"
        },
        {
            "datas_line": [
                "157",
                "158",
                "157",
                "157",
                "157",
                "158",
                "159",
                "161",
                "160",
                "160",
                "159",
                "158",
                "159",
                "160",
                "160",
                "160",
                "160",
                "161",
                "160",
                "161",
                "159",
                "161",
                "161",
                "158",
                "161",
                "159",
                "160",
                "157"
            ],
            "log_time": "5/18/2017 4:32:14 PM"
        },
        {
            "datas_line": [
                "154",
                "156",
                "155",
                "155",
                "155",
                "156",
                "158",
                "159",
                "158",
                "157",
                "157",
                "156",
                "157",
                "158",
                "159",
                "158",
                "158",
                "159",
                "159",
                "159",
                "158",
                "159",
                "159",
                "156",
                "159",
                "157",
                "158",
                "156"
            ],
            "log_time": "5/18/2017 4:34:14 PM"
        },
        {
            "datas_line": [
                "154",
                "156",
                "155",
                "155",
                "155",
                "156",
                "158",
                "159",
                "158",
                "157",
                "157",
                "156",
                "157",
                "158",
                "159",
                "158",
                "158",
                "159",
                "159",
                "159",
                "158",
                "159",
                "159",
                "156",
                "159",
                "157",
                "158",
                "156"
            ],
            "log_time": "5/18/2017 4:34:14 PM"
        }
    ]
}]
}     

Честно говоря, я ищу 2 дня и не знаю, как составить этот 28 температурный списокв зависимости от 1 даты

1 температуры и 1 даты, равной 1 серии.Поэтому я должен повторить серию 28 (она может развиваться как серия от 10 до 50)

Мой текущий код:

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// parse the date / time
var parseTime = d3.timeParse("%m/%d/%Y %H:%M:%S %p");
var i = 0;
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the line
var valueline = d3.line()
    .x(function(d) { return x(d.log_time); })
    .y(function(d) { return y(d.datas_line); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

function draw(data, session, datas_line) {

  var data = data[session][0][datas_line];

  // format the data
  data.forEach(function(d) {
    if (parseTime(d.log_time) != "No data") {
        console.log(parseTime(d.log_time));
        d.log_time = parseTime(d.log_time);
    }
    if (!(isNaN(parseInt(d.datas_line)))) {
        d.datas_line = +parseInt(d.datas_line);
        console.log(d.datas_line);
    }
  });

  // sort years ascending
  data.sort(function(a, b){
    return a["log_time"]-b["log_time"];
    })

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.log_time; }));
  y.domain([0, d3.max(data, function(d) {
      return Math.max(d.datas_line); })]);

  // Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);

  // Add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))


  // Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
  }
// Get the data
d3.json("testSerialisation_v4.ujson", function(error, data) {
  if (error) throw error;

  // trigger render
  draw(data, "Session_test" , "datas_lines");
});

Я должен нарисовать график, а не линию, но я забыл изменить его, так что переходитена нем.