d3（二）

原文链接 http://alignedleft.com/tutorials/d3/

应该是这本书

解答我很多关于d3机理的困惑

然后是07 Using your data

1、Using your data

代码

var dataset = [ 5, 10, 15, 20, 25 ];

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text(function(d){ return d; });

和06的代码比仅仅最后一行代码换了

这里令人困惑的是function（d）的参数d。只要在链条上使用了 data()函数，之后任何时候都可以创建一个把d作为输入的无名函数。 data()函数会确保d的值被设置成原有dataset中对应的值，给予当前最近的元素。

当前元素的值会随着D3循环每个元素而变化。举个例子：当循环到第3次，我们的代码会创建第3个p标签，而d将会对应dataset中的第3个值（dataset[2]）。所以第3个p的text获得赋值15.

2、数据必须被持有

这个参数d只能通过无名函数传参的形式获得，此外的形式是无效的，比如

.text("I can count up to " + d);

这样行不通。

这样规定语法的原因是text(), attr(),和许多其他方法会采用一个函数作为一个参数。

比如，text() 即可以使用一个静态字符文本作文参数：

.text("someString")

也可以使用一个函数：

.text(someFunction())

或者一个匿名函数本事也可以是一个参数，比如:

.text(function(d) {
    return d;
})

Above, you are defining an anonymous function. If D3 sees a function there, it willcall that function, while handing off the current datum d as the function’s argument. Without the function in place, D3 can’t know to whom it should hand off the argument d.
At first, this may seem silly and like a lot of extra work to just get at d, but the value of this approach will become clear as we work on more complex pieces.

在前面，你定义了一个匿名函数。如果D3看到那里有一个函数，它会调用那个函数，同时传递了当前的数据d作为函数的参数。如果那里没有函数。D3将不知道把参数d传给谁.

3、对于Text更进一步研究

当我们可以使用D3的方法(比如attr() 和 style())独立的设置HTML和CSS属性的时候，事情变得越来越好玩了。

比如，在我们代码最后一行添加代码

.style("color", "red");

效果图：

所有的问题都变红了，很好的表换。更重要的是，我们可以使用一个自定义的函数来设定文字颜色，仅仅当数据超过一定阀值时才会变红。因而，我们重写最后一行代码，使用如下函数

.style("color", function(d) {
    if (d > 15) {   //Threshold of 15
        return "red";
    } else {
        return "black";
    }
});

效果图：

我们可以看到前3行是黑的，但是一旦超过规定的阀值15，text变红。

下一讲，我们会使用attr()和style()来操作divs，产生一个简单地条形图----我们第一个可视化产品!