【D3.js数据可视化系列教程】--（四）使用数据

最新推荐文章于 2022-12-26 22:09:40 发布

司机大傻

最新推荐文章于 2022-12-26 22:09:40 发布

阅读量1.3w

点赞数 10

分类专栏：数据可视化 D3数据可视化系列教程文章标签： d3 d3.js d3js 数据可视化

本文链接：https://blog.csdn.net/tianxuzhang/article/details/11339033

版权

数据可视化同时被 2 个专栏收录

44 篇文章 48 订阅

订阅专栏

D3数据可视化系列教程

36 篇文章 205 订阅

订阅专栏

1. 说明

接上面一个例子可以显示数据值，还可以根据数据值来修改颜色值。

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

2. 示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>testD3-3.html</title>
    <script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script>
</head>
<body>
<script type="text/javascript">

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

    d3.select("body").selectAll("p")
        .data(dataset)
        .enter()
        .append("p")
        .text(function(d) {
            return "I can count up to " + d;
        })
        .style("color", function(d) {
            if (d > 15) { //大于15的数字显示为红色
                return "red";
            } else {
                return "black";
            }
        });

</script>
</body>
</html>