Почему selectAll("element") важен в d3js при создании диаграммы

Question

В эти дни я изучаю d3js. Ниже приведен пример, который я попробовал с помощью документации d3js.

<script>
    var data = [4, 8, 15, 16, 23, 42];

    d3.select(".chart").selectAll("div").data(data).enter().append("div").style("width", function(d){return d * 10 + "px"; }).text(function(d){return d;}).attr("class", "bar");
</script>

Мне не ясно, почему selectAll() важен в этом фрагменте кода. Без selectAll() мы также можем сгенерировать диаграмму, но она создается вне тега body. Может ли кто-нибудь помочь мне понять это. Какова роль selectAll() здесь.

Благодарю.

Answer 1

selectAll Оператор позволяет манипулировать набором элементов DOM с привязкой данных или без нее. Например, это изменит все абзацы на странице:

// Select all the paragraphs in the document and set the font color to red
d3.selectAll('p').style('color', 'red');

В D3 вы манипулируете элементами DOM, соединяя выбранные элементы DOM (которые могут существовать или нет) с элементами в массиве. Я напишу ваш код для ясности:

// Data Array
var data = [4, 8, 15, 16, 23, 42];

// Bind the array elements to DOM elements
var divs = d3.select(".chart").selectAll("div").data(data);

// Create divs on the enter selection
divs.enter().append("div");

// Update the style and content of the div elements
divs.style("width", function(d){return d * 10 + "px"; })
    .text(function(d){return d;}).attr("class", "bar");

// Remove divs on the exit selection
divs.exit().remove()

Предположим, что у вас есть div chartи то есть вложенные div:

<div class="chart">
    <div></div>
    <div></div>
</div>

Когда вы делаете select('chart').selectAll('div'), вы выбираете все элементы div внутри div диаграммы классов. В этом случае у нас есть два таких элемента div. Связывая выборку с массивом данных select('chart'). SelectAll('div'). Data(data), происходит несколько вещей:

• Существующие элементы div связаны с первым и вторым элементами вашего массива.
• enter выбор создан. Этот выбор содержит 4 элемента DOM заполнителя. Мы добавим элемент div к каждому .append('div'), enter выбор будет добавлен к divs выбор.
• Если элементов div больше, чем элементов данных, остальные элементы DOM сохраняются в exit выбор, и может быть удален с divs.exit().remove(),

Вы можете узнать больше о выборах, прочитав великолепный учебник Майка Бостка " Как работают выборы".