Question

我正在学习D3，以及如何使用D3的数据绑定机制将元素嵌套或附加到页面。

我修改了http://www.recursion.org/d3-for-mere-mortals/上找到的代码。我理解如何设置svg画布，我也理解将数据绑定到rect，text和line元素的循环。

我不明白的是下面selectAll('Anything1/2/3/4')的来电。它们显然是必要的，但我究竟选择了什么，它们如何适应数据绑定机制？谢谢。

    <html>
    <head>
        <title>D3 Test</title>
        <script type="text/javascript" src="d3/d3.v2.js"></script>
    </head>
    <body>

        <script type="text/javascript">

var dat = [ { title:"A", subtitle:"a", year: 2006, books: 54, avg:10 },
            { title:"B", subtitle:"b", year: 2007, books: 43, avg:10 },
            { title:"C", subtitle:"c", year: 2008, books: 41, avg:10 },
            { title:"D", subtitle:"d", year: 2009, books: 44, avg:10 },
            { title:"E", subtitle:"e", year: 2010, books: 35, avg:10 } ];

var width    = 560,
    height   = 500,
    margin   = 20,
    innerBarWidth =  20,
    outerBarWidth =  40;


var x = d3.scale.linear().domain([0, dat.length]).range([0, width]);
var y = d3.scale.linear()
    .range([0, height - 2 * margin])
    .domain([ 0 , 100 ]);

var z = d3.scale.category10();

var n = d3.format(",d"),
    p = d3.format("%");

var canvas = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + 2 * margin + "," + margin + ")");

// outerbars
var outerBars = d3.select("svg")
  .selectAll("Anything1").data(dat).enter().append("rect")
  .attr("x", function(datum, index) { return x(index); })
  .attr("y", function(datum) { return height - y(datum.books); })
  .attr("height", function(datum) { return y(datum.books); })
  .attr("width", outerBarWidth)
  .attr("fill", "blue")

// innerbars
var innterBars = d3.select("svg")
  .selectAll("Anything2").data(dat).enter().append("rect")
  .attr("x", function(datum, index) { return x(index)+innerBarWidth/2; })
  .attr("y", function(datum) { return height - y(datum.books)/2; })
  .attr("height", function(datum) { return y(datum.books); })
  .attr("width", innerBarWidth)
  .attr("fill", "red");

// avg references
var barlabels = d3.select("svg")
  .selectAll("Anything3").data(dat).enter().append("line")
  .attr("x1", function(datum, index) { return x(index); })
  .attr("x2", function(datum, index) { return x(index)+outerBarWidth; })
  .attr("y1", function(datum) { return height - y(datum.books)/2; })
  .attr("y2", function(datum) { return height - y(datum.books)/2; })
  .style("stroke", "#ccc");

// titles
var barlabels = d3.select("svg")
  .selectAll("Anything4").data(dat).enter().append("text")
  .attr("x", function(datum, index) { return x(index)+innerBarWidth/2; })
  .attr("y", height )
  .attr("text-anchor", "end")
  .text(function (d) {return d.title} );

        </script>
    </body>
</html>

Answer 1

也许在d3中要理解的最重要但最困难的概念是selection（我强烈建议您加入书签并熟悉API）。从表面上看，选择提供了与许多其他JavaScript库类似的功能，例如jQuery：

jQuery的：

var paragraphs = $("p");

D3：

var paragraphs = d3.selectAll("p");

这两行都创建了“选择对象”，它们本质上是DOM元素，它们被分组到一个对象中，使您可以更好地控制元素。与其他库一样，您可以使用库中提供的函数在d3中操作这些“选定”元素。

jQuery的：

var paragraphs = $("p").css("color", "red");

D3：

var paragraphs = d3.selectAll("p").style("color", "red");

同样，从表面上看，这很容易理解。让d3如此强大的原因在于它让你可以通过allowing you to bind arbitrary data to the selected elements.

更进一步

假设您有一个空白文档，并且想要添加几段文本 - 并且每个文本段落都存储在数组中的各个元素中：

var text = ["First", "Second", "Third", "Fourth"];

由于我们尚未创建这些段落，因此以下调用将返回empty selection：

var paragraphs = d3.selectAll("p");
console.log(paragraphs.empty()); // true

请注意，paragraphs仍然是一个选择，它只是空的。这是d3中的一个基本点。您可以将数据绑定到空选择，然后使用数据使用entering selection添加新元素。让我们从前面的例子开始，然后逐步完成这个过程。首先，创建空选择并将text数组绑定到它：

var paragraphs = d3.select("body").selectAll("p").data(text);

然后，使用输入选择，将<p>元素附加到正文：

paragraphs.enter().append("p").text(function(d) { return d; });

你的DOM现在有：

<body>
    <p>First</p>
    <p>Second</p>
    <p>Third</p>
    <p>Fourth</p>
</body>

有很多东西在这一点上肯定会让你感到困惑，但我认为这应该会给你一个良好的开端。

另请参阅：Thinking with Joins。

Answer 2

以下是一些可以帮助您入门的阅读材料：

Understanding selectAll, data, enter, append sequence
Binding Data: Scott Murray D3 Tutorials

从第二个链接解释：

答案在于输入（），这是一种真正神奇的方法。这是我们这个例子的最终代码，我将解释：
d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("New paragraph!");
.selectAll("p") - 选择DOM中的所有段落。由于还不存在，因此返回空选择。可以将这个空选择视为代表即将存在的段落。

基本上，您选择的是尚不存在的DOM元素，然后将数据附加到这些不存在的元素，然后在绑定数据后附加它们。

外部selectAll：选择什么？

2 个答案: