二 d3.数据绑定

最新推荐文章于 2025-05-12 13:54:10 发布

转载最新推荐文章于 2025-05-12 13:54:10 发布 · 347 阅读

javascript 专栏收录该内容

6 篇文章

订阅专栏

1. D3可以处理哪些类型的数据？

JS的数据类型。

如数字，时间，字符串，布尔值，数组，对象等都可以。
D3自定义的数据类型。

如集合（Set）,映射（Map）,嵌套（Nest）,及各种颜色空间（RGB，HSL，L*a*b，HSV）对象等

最常用的是数组，JSON。特殊的有CSV，GeoJSON数据等。

2. 如何绑定？

<!DOCTYPE html>
<html>
<head>
    <title>testD3-1.html</title>
    <script type="text/javascript" src="d3.js"></script>
</head>

<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
    var dataset = [ 5, 10, 15, 20, 25 ];

    d3.select("body").selectAll("p") .data(dataset) .enter()
            .append("p").text("New paragraph!");
</script>
</html>

3.代码解释

查找DOM中的body

d3.select("body")

选择DOM中的所有段落

由于没有存在，这个将返回一个空的选择，这个选择为空，代表段落很快就会存在，

selectAll("p")

计数和分析我们的数据值

有五个值，之后我们的数据集执行了5次，每个值一次

注意这里data函数会绑定数据，并能够使用D3经典的E-N-E编程套路，而另外一个数据绑定函数datum 则只是替换一组新的数据

data(dataset)

绑定数据和DOM元素

这个方法将数据传递到DOM,如果数据值比相应的DOM元素多,就是用enter()创建一个新元素的占位符

enter()

追加元素

通过enter() 创建的占位符在DOM中插入一个P元素

append("p")

设置元素的文本

为新创建的p标签插入一个文本值

text("New paragraph")

4 效果

This is my HTML page.

New paragraph!

+++++++++++++++++++++++++++++++++++++++++++++++++++++

如何使用数据？

1.说明：接上面例子可以显示数据值，可以根据数据值来修改颜色值

d表示当前数据值，可以使用一个匿名函数处理这个数据

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="d3.js"></script>
    <title>demo2</title>
</head>
<body>
    <script type="text/javascript">

  	var data=[1,2,3,4,5];

	//查找DOM下的body
        d3.select("body")

	//选择DOM中所有的段落，如果为空 代表段落很快就会存在

	.selectAll("p")

  
   计数和分析我们的数据值，有五个值，之后我们的数据集执行了5次，每个值一次，注意这里data函数会绑定数据，并能够使用D3经典的E-N-E编程套路，而另外一个数据绑定函数datum 则只是替换一组新的数据

	.data(data)

	//通过enter在DOM中创建占位符，插入一个p元素

	.enter().append("p")

	.text(function(d){

            return "i can count up to" +d;})
                .style("color",function(d){//颜色样式
                    if(d>1){//如果大于15的颜色就是红色
                        return "red";
                    }else{
                        return "green";
                    }
                });
    </script>

</body>
</html>