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

debugcn 发表于 Dev

独山

这些天我正在学习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（）在这里的作用是什么。

谢谢。

巴勃罗·纳瓦罗（Pablo Navarro）

该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元素。我们将为每个元素添加一个div元素.append('div')。该enter选择将被追加到divs选择。
如果div大于数据元素，则剩余的DOM元素将存储在exit选择中，并可以使用删除divs.exit().remove()。

您可以阅读Mike Bostock出色的教程“选择如何工作”，以了解有关选择的更多信息。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章