D3 multi series line graph

Question

Я пытаюсь создать линию + диаграмму рассеяния по нескольким категориям данных из нескольких стран за эти годы.

Проблема заключается в том, что линейный граф продолжается от одной категории данных до следующей категории данных. Я посмотрел на exmaple от http://bl.ocks.org/mbostock/3884955, но не совсем понял, какие изменения мне нужно реализовать.

Должен ли я разделять данные с помощью элементов? Или, есть ли более простой способ сделать это?

var line = d3.svg.line() 

     .x(function(d) 
      {return xScale(d.Year); 
      }) 
     .y(function(d){ 
      return yScale(d.Value); 
      }) 

// добавляющих круги для рассеивания

var circle = svg.selectAll('circle') 
     .data(data) 
     .enter() 
     .append("circle") 

// рисование линий.

svg.append('path') 
    .datum(data) 
    .attr("d",line) 
    .style("stroke","blue") 
    .style("stroke-width","1px") 
    .style("fill","none") 

// Порция файла данных CSV. Данные повторяются для нескольких стран.

Variable,Unit,Country,Year,Value,Flags 
"Hepatitis B","% of children immunised","Australia","2001",94, 

"Hepatitis B","% of children immunised","Australia","2002",94, 

"Hepatitis B","% of children immunised","Australia","2003",95, 

"Hepatitis B","% of children immunised","Australia","2004",95, 

"Hepatitis B","% of children immunised","Australia","2005",95, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1980",33, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1981",40, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1982",48, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1983",55, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1984",62, 

"Measles","% of children immunised","Australia","1983",68, 

"Measles","% of children immunised","Australia","1984",68, 

"Measles","% of children immunised","Australia","1985",68, 

Answer 1

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

В exmaple из http://bl.ocks.org/mbostock/3884955, график классифицируют по городам, данные, передаваемые в таблице классифицируют города массив:

var city = svg.selectAll(".city") 
     .data(cities) 
    .enter().append("g") 
     .attr("class", "city"); 

city.append("path") 
    .attr("class", "line") 
    .attr("d", function(d) { return line(d.values); }) 
    .style("stroke", function(d) { return color(d.name); }); 

Структура данных массива города, как показано ниже:

Нью-Йорк - > Array [...]

San Fran -> Array [...]

Остин -> Array [...]

Смотрите рисунок ниже для деталей:

Надеется, что это помогает.