d3JS: итерация по путям неизвестного количества точек

Question

Этот вопрос является расширением original question regarding line segments.

Что касается исходного вопроса, вопрос о сегменте линии чертежа от ЦТС был решен с помощью this script (благодаря @VividD). Вот данные для рисования двух отрезков от TSV:

x0  y0  x1  y1  weight 
0.5  0.5  0.2  0.2  2 
0.25 0.35 0.7  0.8  1 

Теперь я пытаюсь рисовать пути (или ломаные) с неизвестным числом вершин. Это потребует, чтобы скрипт выполнял итерацию по каждой строке, ища количество столбцов для добавления к данным для каждого пути. Я не знаю, как это сделать, потому что сценарии, с которыми я работал, полагают, что программист знает имена столбцов (d.close, d.date и т. Д.).

x0  y0  x1  y1  x2  y2   weight 
0.5  0.5  0.2  0.2       2 
0.25 0.35 0.7  0.8  0.5  0.6   1 

Есть ли у кого-нибудь идея, как выполнить итерацию по приведенному выше примеру, рисовать пути для каждой строки данных?

Answer 1

Если предположить, что данные в массиве data, это создаст массив points переменной длины для каждого из кортежей:

data.forEach(function(d) { 
    d.points = []; 
    for (var i = 0; d["x"+i] !== "" && (typeof d["x"+i] !== 'undefined'); i++) { 
     d.points.push([d["x"+i], d["y"+i]]); 
    } 
}); 

Э.Г. для первой строки в вашем примере

d.points = [[0.5, 0.5], [0.2, 0.2]] 

, который затем может быть использован для рисования линий:

var line = d3.svg.line(); 

svg.selectAll("path") 
    .data(data) 
    .enter() 
    .append("path"); 

svg.selectAll("path") 
    .attr("d", function(d) { return line(d.points); }) 
    .attr("stroke-width", function(d) { return (d.weight); }) 
    .attr("stroke", "black") 
    .attr("fill", "none"); 

Полный пример here.