Всякий раз, когда вы видите function(d) {...} в качестве параметра .attr(), .style(), .data(), .datum(), .each() и некоторых других, d относится к привязанному элементу каждого элемента в выбор.
Но если вы видите линию, нарисованную как в первом подходе:
.attr("d", line(data))`
Каждый элемент в выделении будет иметь одну и ту же строку: line(data) будет возвращать одно и то же значение для каждого элемент в выборе. Этот подход может быть использован, если вы не привязали какие-либо данные к выбору. Чтобы нарисовать несколько разных линий, нам нужно было бы использовать al oop некоторого вида и изменить значение data. Если вы привязываете данные к выделению (что является ключевой целью D3), вы должны использовать эти привязанные данные, как во втором подходе - будет проще, если вы решите иметь более одной строки.
В второй подход:
.attr("d", function(d) { return line(d); })
Связанный элемент данных каждого элемента в выделении передается в line(), так как привязанный элемент данных для каждой строки может быть разным, вы можете иметь разные строки без явного l oop. Для нескольких строк это, безусловно, будет идиоматический метод c, хотя для отдельных строк, если честно, разница весьма незначительна.
Я на самом деле не видел .attr("d", line(data)) в первой ссылка примера, ссылка первого примера вместо этого имеет .attr("d", line), что эквивалентно второму примеру:
Во втором примере это:
.attr("d", function(d) { return line(d); })
эквивалентно:
.attr("d", line);
В более простой строке привязанные данные передаются в line, а line выполняется для каждого элемента в выборе. Вот тот же блок обновленный для демонстрации.