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

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

为什么selectAll（＆＃34; element＆＃34;）在生成图表时在d3js中很重要

1 个答案: