Использование D3 'select' и 'selectAll'

Question

Я не могу обернуть голову вокруг оператора выбора D3.

При создании графика, вы, как правило, сделать что-то вроде этого:

svg.selectAll("rect") 
    .data(my_graph_data) 
    .enter() 
    .append("rect") 
    ..//etc. 

То, что я не понимаю, является SelectAll. На данный момент нет элемента для выбора! Элементы добавляются позже только на основе данных.

Должен ли я читать эти инструкции D3 справа налево? В этом случае, зачем мне нужно выбирать элементы?

Answer 1

Вам необходимо выбрать (несуществующие) элементы из-за последующего вызова .data(). Этот вызов указывает D3 сопоставить данные, указанные в аргументе, с выбранными вами элементами. Если, как и в вашем случае, выбор пуст, D3 создаст элементы-заполнители для всех из них - выбор ввода. Затем этот выбор можно использовать, как и вы, для добавления новых элементов.

Этот шаблон .selectAll(...).data(...) совместим, независимо от того, что у вас есть в вашем SVG. Пока вы обрабатываете все три (ввод, обновление, выход), он всегда будет делать ожидаемую вещь. При первоначальном выборе не может быть элементов, элементов для всех данных или где-то посередине.

Технически вы не имеете для использования этого шаблона при первоначальном добавлении новых элементов, это просто делает код более согласованным. В частности, этот шаблон можно использовать в функции, которая будет обновлять SVG новыми данными независимо от их состояния (т. Е. Работает так же, как и при получении и отображении новых и измененных данных).