D3 javascript Разница между foreach и каждым

Ответ 1

Во-первых, .forEach() не является частью d3, это нативная функция массивов javascript. Таким образом,

["a", "b", "c"].forEach(function(d, i) { console.log(d + " " + i); });
// Outputs:
a 0
b 1
c 2

И это работает, даже если d3 не загружается на страницу.

Затем d3 .each() работает с выбором d3 (что вы получаете, когда вы d3.selectAll(...)). Технически вы можете вызвать .forEach() на выбор d3, так как за кулисами выбор d3 представляет собой массив с дополнительными функциями (один из них - .each()). Но вы не должны этого делать, потому что:

• Это не приведет к желаемому поведению. Знание того, как использовать .forEach() с выбором d3 для создания любого желаемого поведения, потребует глубокого понимания внутренней работы d3. Итак, зачем это делать, если вы можете просто использовать документальную, общедоступную часть API.

• Когда вы вызываете .each(function(d, i) { }) в выборе d3, вы получаете больше, чем просто d и i: функция вызывается так, что ключевое слово this внутри этой функции указывает на HTML DOM элемент, связанный с d. Другими словами, console.log(this) изнутри function(d,i) {} будет записывать что-то вроде <div class="foo"></div> или любого другого элемента html. И это полезно, потому что тогда вы можете вызвать функцию на этом объекте this, чтобы изменить его свойства, содержимое CSS или что-то еще. Обычно вы используете d3 для установки этих свойств, как в d3.select(this).style('color', '#c33');.

Основной вывод заключается в том, что при использовании .each() вы получаете доступ к 3 вещам, которые вам нужны: d, this и i. С .forEach() в массиве (как в примере с самого начала) вы получаете только 2 вещи (d и i), и вам нужно будет выполнить кучу работы, чтобы связать элемент HTML с эти две вещи. И это, среди прочего, способ использования d3.