Javascript 为什么在d3js中生成图表时selectAll（“元素”）很重要

这些天我在学习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>

var数据=[4,8,15,16,23,42]；
d3.select（“.chart”）.selectAll（“div”）.data（data）.enter（）.append（“div”）.style（“width”，函数（d）{return d*10+“px”；}）.text（函数（d）{return d；}）.attr（“class”，“bar”）；

我不清楚为什么selectAll（）在这段代码中很重要。如果没有selectAll（），我们也可以生成图表，但它是在body标记之外创建的。谁能帮我理解这一点。selectAll（）在这里的作用是什么

---

谢谢。

使用

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 classed

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元素。我们将使用

  .append（'div'）

  向每个元素追加一个div元素。

  enter

  选择将附加到

  divs

  选择中
• 如果div多于数据元素，则剩余的DOM元素存储在

  exit

  选择中，可以使用

  divs.exit（）.remove（）

  删除

通过阅读Mike Bostock的优秀教程，您可以了解更多有关选择的信息