Добавление SVG: круг элементов к d3.js линии

Question

Я рендеринга диаграмму линии через d3, который связан с массивом объектов в следующем формате:

{ name: "somename", 
    pointStart: 90210, 
    pointInterval: 187, 
    data: [1,2,3,4,5] 
} 

Значения Y являются значениями в data, а значения Х представляет собой последовательность значений, вычисленные Даты путем добавления pointStart произведению pointInterval и индекс data

в дополнении к черчению пути линии, я пытаюсь наложить «круги» в каждая координата x, y. Строка отображается правильно, и появляется только первый круг.

Проверьте, пожалуйста, plunkr для примера.

Поскольку путь линии уже имеет координаты x, y, я надеялся использовать это и нарисовать круг на каждой паре, однако первая координата круга не найдена, и я не уверен, почему.

Это код, который выбирает линейный массив, получает пары x, y, а затем рисует круг. Данные обязаны массив из 9 элементов, но только 8 кругов добавляются к йоту ...

lines.selectAll('path') 
.data(function(d) { console.log(getDataArray(d)); return getDataArray(d); }) 
.enter() 
.append('circle') 
.attr({ 
    class:'dot', 
    cx:line.x(), 
    cy:line.y(), 
    r:circleR, 
    fill: function(d,i,e) { return colors(data[e].name);} 
}) 

Answer 1

Это потому, что вы выбор на «путь», но добавление «кругов». Когда вы делаете lines.selectAll('path'), он возвращает выбор, содержащий 1 элемент, потому что уже есть элемент <path> под строками. Поэтому, когда вы связываете данные с 9 элементами, первый элемент привязывается к существующему пути, оставляя оставшиеся 8 элементов для выбора ввода.

Если вы измените его на это должно работать:

lines.selectAll('circle') 
    .data(function(d) { console.log(getDataArray(d)); return getDataArray(d); }) 
    .enter() 
    .append('circle')