chpater-3 可视化数据

eg1:

 var data = [10,40,60];

    var canvas = d3.select('body')
        .append('svg')
        .attr('width',500)
        .attr('height',500);

    canvas.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('width',function(item){return item*10})
        .attr('height',50)
        .attr('y',function(item,i){
            return i*60
        })
        .attr('fill','skyblue')

eg2:

var data = [10,40,60];

    var canvas = d3.select('body')
        .append('svg')
        .attr('width',500)
        .attr('height',500);

    canvas.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('width',40)
        .attr('height',function(item){
            return item*10
        })
        .attr('x',function(item,i){
            return i*60
        })
        .attr('y',function(item){
             return 500-item*10
        })
        .attr('fill','skyblue')

methods:

1.selectAll()

选择所有的节点, 没有的话返回一个空的数组节点群( empty array or empty selection), 可将这些空的数组绑定数据, 用 data()方法

2.data()

绑定数据到空节点 (empty selection)

这里，data()是用来绑定数据到选择的DOM元素上.这样以后，就可以针对这些数据做一些相关操作，比如设置元素宽度等。

从表面上，并不能看出什么变化。但在内部，它是在对应的DOM元素上添加了一个__data__属性，可以通过document.getElementsByTagName("p")[0].__data__看到。

3.enter()

简言之,占位符，虚拟dom

当DOM数量少于data的数量，或者压根一个都没有的时候，我们一般会希望让程序帮忙创建。下面的例子，我们没有事先提供DOM元素：

<body></body>

仍旧执行：

 d3.select("body").selectAll("p").data([1, 2, 3])

enter()是用来在绑定数据之后，选择缺少的那部分DOM元素。我们可能会疑惑，既然是缺少的部分，怎么选择呢？这里就需要我们发挥一点想象力，想象我们选择了一些不存在的东西。我们可以称之为“虚拟DOM”或“占位符(placeholder)”。

enter()只是进行选择，并未实际添加所需DOM元素。因此在enter()之后一般都会配合append()来进行DOM元素的实际创建。

由此以来，我们使用 d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p") 即可根据数据自动创建所需的DOM元素。

4.exit()

与enter()相反，exit()是用来选择那些与数据相比多出来的DOM元素。

在下面例子中，我们多提供了一个DOM元素：

<body>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>

这回就容易理解了，因为是多出来的，那么就是实际存在的，即最后一个<p>。

多出来的话，我们可以接着用.remove()移除这些元素，代码如下：

d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();

Previouschapter-2 d3 svg shape Nextchapter-4 比例尺

Last updated 6 years ago