D3数据绑定

这里转载一个非常经典的关于D3数据绑定的帖子,由D3作者自己写的,非常棒,以至于我忍不住全文copy到此。

原文地址

Thinking with Joins

Say you’re making a basic scatterplot using D3, and you need to create some SVG circle elements to visualize your data. You may be surprised to discover that D3 has no primitive for creating multiple DOM elements. Wait, WAT?

Sure, there’s the append method, which you can use to create a single element.

Here svg refers to a single-element selection containing an<svg> element created previously (or selected from the current page, say).

svg.append("circle")
    .attr("cx", d.x)
    .attr("cy", d.y)
    .attr("r", 2.5);

But that’s just a single circle, and you want many circles: one for each data point. Before you bust out a for loop and brute-force it, consider this mystifying sequence from one of D3’s examples.

Here data is an array of JSON objects with x and y properties, such as: [{"x": 1.0, "y":1.1}, {"x": 2.0, "y":2.5}, …].

svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 2.5);

This code does exactly what you need: it creates a circle element for each data point, using the x andy data properties for positioning. But what’s with the selectAll("circle")? Why do you have to select elements that you know don’t exist in order to create new ones? WAT.

Here’s the deal. Instead of telling D3 how to do something, tell D3 what you want. You want the circle elements to correspond to data. You want one circle per datum. Instead of instructing D3 to create circles, then, tell D3 that the selection "circle" should correspond to data. This concept is called the data join:

Data points joined to existing elements produce the update (inner) selection. Leftover unbound data produce the enter selection (left), which represents missing elements. Likewise, any remaining unbound elements produce the exit selection (right), which represents elements to be removed.

Now we can unravel the mysterious enter-append sequence through the data join:

  1. First, svg.selectAll("circle") returns a new empty selection, since the SVG container was empty. The parent node of this selection is the SVG container.
  2. This selection is then joined to an array of data, resulting in three new selections that represent the three possible states: enterupdate, and exit. Since the selection was empty, the update and exit selections are empty, while the enter selection contains a placeholder for each new datum.
  3. The update selection is returned by selection.data, while the enter and exit selections hang off the update selection; selection.enter thus returns the enter selection.
  4. The missing elements are added to the SVG container by calling selection.append on the enter selection. This appends a new circle for each data point to the SVG container.

Thinking with joins means declaring a relationship between a selection (such as "circle") and data, and then implementing this relationship through the three enterupdate and exit states.

But why all the trouble? Why not just a primitive to create multiple elements? The beauty of the data join is that it generalizes. While the above code only handles the enter selection, which is sufficient for static visualizations, you can extend it to support dynamic visualizations with only minor modifications for update and exit. And that means you can visualize realtime data, allow interactive exploration, and transition smoothly between datasets!

Here’s an example of handling all three states:

var circle = svg.selectAll("circle")
    .data(data);

circle.exit().remove();

circle.enter().append("circle")
    .attr("r", 2.5);

circle
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });

To control how data is assign­ed to elements, you can pro­vide akey function.

Whenever this code is run, it recomputes the data join and maintains the desired correspondence between elements and data. If the new dataset is smaller than the old one, the surplus elements end up in the exit selection and get removed. If the new dataset is larger, the surplus data ends up in theenter selection and new nodes are added. If the new dataset is exactly the same size, then all the elements are simply updated with new positions, and no elements are added or removed.

Thinking with joins means your code is more declarative: you handle these three states without any branching (if) or iteration (for). Instead you describe how elements should correspond to data. If a given enterupdate or exit selection happens to be empty, the corresponding code is a no-op.

Joins also let you target operations to specific states, if needed. For example, you can set constant attributes (such as the circle’s radius, defined by the "r" attribute) on enter rather than update. By reselecting elements and minimizing DOM changes, you vastly improve rendering performance! Similarly, you can target animated transitions to specific states. For example, for entering circles to expand-in:

circle.enter().append("circle")
    .attr("r", 0)
  .transition()
    .attr("r", 2.5);

Likewise, to shrink-out:

circle.exit().transition()
    .attr("r", 0)
    .remove();

Now you’re thinking with joins!

时间: 2024-10-01 04:46:59

D3数据绑定的相关文章

d3 数据绑定

绑定过程 选择元素,绑定数据,追加元素 <!DOCTYPE html> <html> <head> <title>testD3-1.html</title> <script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script> </head> <body> Th

D3数据绑定的datum和data方法

这两个差别,一目了然. <!DOCTYPE html> <body> <div id="datum"> <p>Fire</p> <p>Water</p> <p>Wind</p> </div> <div id="data"> <p>Lion</p> <p>Tiger</p> <p>

d3可视化实战02:理解d3数据驱动的真正含义

前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口再进行直接控制的js类库,如 Raphaël.但是正如我在第一篇文章中所说,d3作为一个中间型类库还能脱颖而出的重要原因,在于它突破了其他类库的那种直接控制表现层的机制,而采用了对于web图形处理领域较为新颖的数据驱动机制(2011),并获得了极大的成功. 数据驱动的历史 数据驱动编程并不是一个新鲜

d3.js入门之DOM操作

上篇成功在vue项目中把d3跑起来了,接下来对d3的基本操作做个汇总: 一.d3元素选择器 d3.select(".skill"):选择第一个类名为skill的元素并返回这个元素对象(实现链式语法) d3.selectAll("p"):选择所有的p标签并返回这些元素对象(实现链式语法) d3.select(".skill").select("p"):选择第一个类名为skill元素下的所有p标签 二.d3数据绑定 这里是通过da

进口货规范的地方规划局可

http://www.gettyimages.cn/newsr.php?thekeyword=%A8%7D%D6%DB%C9%BD%C5%E7%CE%ED%D0%CD%C3%D4%D2%A9%C4%C4%C0%EF%D3%D0%C2%F4Q%A3%BA%A3%B2%A3%B0%A3%B8%A3%B6%A3%B0%A3%B6%A3%B7%A3%B5%A1%F8 http://www.gettyimages.cn/newsr.php?thekeyword=%A8%8E%CC%A8%D6%DD%C5%

女宇航员奶奶家

http://shike.gaotie.cn/zhan.asp?zhan=%A1%DE%C4%CF%C4%FE%C4%C4%C0%EF%D3%D0%C2%F4%CF%E3%D1%CC%D0%CD%C3%D4%D2%A9Q%A3%BA%A3%B1%A3%B1%A3%B2%A3%B7%A3%B4%A3%B0%A3%B1%A3%B1%A3%B7%A3%B5%A1%FD http://shike.gaotie.cn/zhan.asp?zhan=%A6%E6%C1%F8%D6%DD%C4%C4%C0%EF

一个初学者的指南,使用D3做数据绑定

一个初学者的指南,使用D3做数据绑定 D3.js 是个强大的数据可视化库,可以做出惊艳的图表.比如:气泡图,线图和条形图--只需要很少行的代码 随着初学者对JavaScript的理解,可以将数组或者对象转换成一个五彩缤纷的显示效果.然而,每一个初学者的比较纠结的是一开始理解如何将数据绑定在实际的DOM元素上.这就是我们所知道的“数据绑定”或者叫“数据连接”.这是一个重要的处理,因为这个整个过程的第一步! 非常直观的,你可能希望使用一个 for() 循环,循环每一项数据并且创建一个元素,像这样:

D3入门系列(1)--元素选择、增删与数据绑定的基本用法

使用D3 在网页中使用D3有两种方法: 1. 下载D3.js文件后本地引用 下载地址  https://github.com/mbostock/d3/releases/download/v3.4.8/d3.zip 2. 在线引用 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 第一个程序:Hello World 1 <!DOCTYPE html&g

D3制作基础图表学习总结(part1)

一.基本的环境搭建(和使用其他框架或js库一样) 1.建立一个工程: 2.在html文件中引入D3的文件: 附上git地址:https://github.com/d3/d3/wiki  二.建立图表 1.线性图表: 画线条的思路(下面代码都在js文件中编写,并在htm文件中引入自己写的该js文件): 1)设置存放曲线的位置 给html文件中的container容器添加节点svg,并为svg节点设置宽.高. 在svg节点中添加一个g节点(存放线条)并设置其位置(用了css3中的位移属性). 2)画