javascript - 为什么 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 元素，无论是否有数据绑定(bind)。例如，这将修改页面中的所有段落:

// 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()

假设您有一个名为 chart 的 div，并且具有嵌套的 div:

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

当您执行 select('chart').selectAll('div') 时，您将选择类图表的 div 内的所有 div 元素。在本例中，我们有两个这样的 div 元素。通过将选择与数据数组 select('chart').selectAll('div').data(data) 绑定(bind)，会发生以下几件事:

• 现有的 div 元素已绑定(bind)到数组的第一个和第二个元素。
• enter 选项已创建。此选择包含 4 个占位符 DOM 元素。我们将使用 .append('div') 为每个元素附加一个 div 元素。 enter 选项将附加到 divs 选项中。
• 如果 div 数量多于数据元素，则剩余的 DOM 元素将存储在 exit 选择中，并且可以使用 divs.exit().remove() 删除>.

您可以通过阅读 Mike Bostock 的优秀教程 How Selections Work 来了解有关选择的更多信息。 .