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>Leopard</p>
    </div>
</body>

<script src="d3.v3.min.js" charset="UTF-8"></script>
<script>
    var pu = d3.select("#datum").selectAll("p");
    pu.datum("Thunder")
      .append("span")
      .text(function(d, i){
        return " " + d + " " + i;
    });
    console.log(pu);

    var dataset = [3];
    var pa = d3.select("#data").selectAll("p");
    var update = pa.data(dataset);
    console.log(update);
    console.log(update.enter());
    console.log(update.exit());
</script>

原文地址:https://www.cnblogs.com/aguncn/p/12388451.html

时间: 2024-11-05 14:46:46

D3数据绑定的datum和data方法的相关文章

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 pri

jQuery中的data()方法

data()方法,用于存储/获取临时数据 HTML data-* 属性 在标签中利用 data-* 设置自定义的属性,存储数据. <div id="person"> <p data-fullname="张小明" data-age="24" data-profession="前端开发工程师">小明</p> <p data-fullname="刘小红" data-age

使用jQuery的data方法来为页面中的某个元素存储数据,(获取焦点,清除默认值)

使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据: 使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的. 我们可以使用jQuery的data方法来为页面中的某个元素存储数据: html部分: 1 <form id="testform"> 2 <input type="text" class="clear" value="Always cleared&qu

jquery data方法取值与js attr取值的区别

<a data-v="3"></a> jquery data方法的运行机制: 第一次查找dom,使用attributes获取到dom节点值,并将其值存到缓存里,第二次操作的时候,还是先找到dom,但是这次取值是直接从缓存读了,少了一步对dom的操作 attr()方法每次都要操作dom,性能上差点儿 $('a').data('v')取到的值是页面初次加载的缓存值,以后如何更改,在页面上都不会改变,但缓存值会变,可以传给i/o请求使用 document.getEle

jquery data方法

jquery.data()文档:http://api.jquery.com/jQuery.data/ html5有个data-*属性,跟这个功能一样. Note: This is a low-level method; a more convenient .data() is also available. The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is

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

jQuery中使用data()方法读取HTML5自定义属性data-*实例

如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如下: 复制代码代码如下: .data( key, value ).data( obj ).data( key ).data() 从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中.例如HTML: 复制代码代码如下: <div data-role =

JQuery data方法的使用-遁地龙卷风

(-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage方法如下 showMessage.i = 0; function showMessage(object) { var body = $("body")[0]; var $p =$("#debugp"); if($p.length==0) { $p = $("&

html5的自定义data-*属性和jquery的data()方法的使用示例

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用. 这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情. 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布