d3.js学习笔记（五）------散点图的更新（数轴）

最新推荐文章于 2022-09-17 15:15:14 发布

Martian_小小

最新推荐文章于 2022-09-17 15:15:14 发布

阅读量507

点赞数

分类专栏： D3.js 文章标签： d3.js 数据可视化

本文链接：https://blog.csdn.net/weixin_45950819/article/details/113689707

版权

D3.js 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

散点图的更新

一、创建x轴 y轴

二、更新x轴 y轴

三、在过渡开始和结束时执行的操作

格式：

. on(“start”,function(){ … })
. on(“end”,function(){ … })

要点：
1、. on(“start”,function(){ … })中一定不能添加 transition ，否则会覆盖掉外面的transition效果
2、. on(“end”,function(){ … })中可以使用transition 效果

四、剪切路径（蒙版）

超出蒙版外的像素不会显示
使用剪切路径的步骤：

定义 clipPath 并给其添加 id
在此 clipPath 中放一个可见元素（如：rect）
在需要使用蒙版的元素上添加一个对 clipPath 的引用

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>散点图</title>
    <script type="text/javascript" src="d3.js"></script>
    <style>
        .text{
            font-family: sans-serif;
            font-size: 11px;
            fill: red;
        }

        .axis path,
        .axis line{
            fill:none;
            stroke:black;
            shape-rendering: crispEdges;
        }
        .axis text{
            font-family: sans-serif;
            font-size: 11px;
        }


    </style>    
</head>
<body>
    <p>Updata datas</p>
    <script>
        var dataset=[[10,20],[480,90],[270,50],[100,33],
                     [330,95],[410,12],[600,150],[23,156],
                     [85,21],[220,80],[50,70],[130,78],
                     [429,71],[512,520],[334,216],[76,297],
                     [381,98],[23,76],[365,23],[167,327],
                     [247,456],[303,315],[234,497],[576,398],
                     [250,275],[80,198],[236,301],[578,1],
                     [2,197],[178,378],[271,478],[165,150],
                     [487,202],[414,408],[408,317],[576,365]]
        var w=700;
        var h=500;
        var padding=30; //不引入会有溢出
        var svg=d3.select("body")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h);
        
        //比例尺可以很好的反应数据的相对位置，而不受极端数据以及画布大小的影响
        //x上的比例尺
        var xScale=d3.scaleLinear()
                        .domain([0,d3.max(dataset,function(d) {return d[0]; })])
                        .range([padding,w-padding*2]);
        
        //y上的比例尺               
        var yScale=d3.scaleLinear()
                        .domain([0,d3.max(dataset,function(d) {return d[1]; })])
                        //.range([padding,h-padding]);
                        //比例尺的反转，小值在上方，大值在下方
                        .range([h-padding,padding])
                        .clamp(true);  //强制所有输出值都在指定范围内

        //r的比例尺
        var rScale=d3.scaleLinear()
                        .domain([0,d3.max(dataset,function(d){ return d[1]; })])
                        .range([2,5]);

        //定义x轴数轴
        var xAxis=d3.axisBottom()
                     .scale(xScale)
                     //.ticks(5);  //粗略设置刻度线的数量，只是粗略，d3会更精确的确定具体采用几根刻度线
                    
        //定义y轴数轴
        var yAxis=d3.axisLeft()
                     .scale(yScale)                
                     //.ticks(4);

        //添加蒙版
        svg.append("clipPath")  //创建新的clipPath元素
            .attr("id","chart-area")
            .append("rect")  //在clipPath中添加可见元素
            .attr("x",padding)
            .attr("y",padding)
            .attr("width",w-padding*3)
            .attr("height",h-padding*2)

        svg.append("g")
            .attr("id","circles")
            .attr("clip-path","url(#chart-area)") //添加对 clipPath 的引用
            .selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")
            .attr("cx",function(d){   //d代表返回的整个数据集
                return xScale(d[0]);
            })
            .attr("cy",function(d){
                return yScale(d[1]);
            })
            .attr("r",function(d){
                return rScale(d[1]);
            });

        svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text(function(d){ return d[0]+","+d[1]; })
            .attr("x",function(d){ return xScale(d[0])-1; })
            .attr("y",function(d){ return yScale(d[1])-8; })
            .attr("class","text");

        //g是分组元素：1）为组织其他元素；2）对整个分组应用变换，从而影响该组中所有元素
        //添加x轴数轴，必须调用xAxis函数
        svg.append("g")
             .attr("class","x axis")
             //将数轴分组移动到图标下方
             .attr("transform","translate(0,"+(h-padding)+")")
             .call(xAxis);

        //添加y轴数轴
        svg.append("g")
            .attr("class","y axis")
            .attr("transform","translate("+padding+",0)")
            .call(yAxis);

        d3.select("p")
            .on("click",function(){
                var dataset=[[109,20],[100,50],[270,90],[378,33],
                            [410,12],[330,150],[23,150],[600,156],
                            [85,21],[512,23],[50,70],[130,78],
                            [429,197],[512,520],[334,216],[76,297],
                            [381,98],[23,76],[220,23],[167,612],
                            [247,456],[303,315],[234,497],[576,398],
                            [250,275],[80,567],[236,301],[578,1],
                            [2,33],[178,378],[271,478],[165,150],
                            [487,202],[414,408],[408,317],[700,365]]

                //更新x上的比例尺
                var xScale=d3.scaleLinear()
                                .domain([0,d3.max(dataset,function(d) {return d[0]; })])
                                .range([padding,w-padding*2]);
                
                //更新y上的比例尺               
                var yScale=d3.scaleLinear()
                                .domain([0,d3.max(dataset,function(d) {return d[1]; })])
                                .range([h-padding,padding])
                //更新r的比例尺
                var rScale=d3.scaleLinear()
                                .domain([0,d3.max(dataset,function(d){ return d[1]; })])
                                .range([2,5]);

                //定义x轴数轴  一定要重新定义一次在更新，否则数轴更新无效
                var xAxis=d3.axisBottom()
                             .scale(xScale)
       
                //定义y轴数轴
                var yAxis=d3.axisLeft()
                             .scale(yScale)                

                //更新x轴数轴
                svg.select(".x.axis")
                    .transition()
                    .duration(1000)
                    .call(xAxis)

                //更新y轴数轴
                svg.select(".y.axis")    //必须写清楚是哪个轴，不然会出错
                    .transition()
                    .duration(1000)
                    .call(yAxis)

                //更新圆形
                svg.selectAll("circle")
                    .data(dataset)
                    .transition()
                    .duration(1000)
                    .on("start",function(){
                        d3.select(this)
                            .attr("fill","magenta")   //在start中不可以用transition，会覆盖掉外面的过渡效果
                            .attr("r",6)
                    })
                    .attr("cx",function(d){   //d代表返回的整个数据集
                        return xScale(d[0]);
                    })
                    .attr("cy",function(d){
                        return yScale(d[1]);
                    })
                    .on("end",function(){
                        d3.select(this)
                            .transition()
                            .duration(250)   //在end中可以用transition
                            .attr("fill","black")
                            .attr("r",function(d){ return rScale(d[1]) ;})
                    })

                    //更新文本
                    svg.selectAll("text")
                        .data(dataset)
                        .transition()
                        .duration(500)
                        .text(function(d){ return d[0]+","+d[1]; })
                        .attr("x",function(d){ return xScale(d[0])-1; })
                        .attr("y",function(d){ return yScale(d[1])-8; })
                        .attr("class","text");
            })
    </script>
</body>
</html>

结果如图：
未点击前：
在这里插入图片描述
点击后元素正在移动：

移动完毕：

Martian_小小

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
d3.js学习笔记（五）------散点图的更新（数轴）

散点图的更新一、创建x轴 y轴二、更新x轴 y轴三、在过渡开始和结束时执行的操作格式：. on(“start”,function(){ … }). on(“end”,function(){ … })要点：1、. on(“start”,function(){ … })中一定不能添加 transition ，否则会覆盖掉外面的transition效果2、. on(“end”,function(){ … })中可以使用transition 效果四、剪切路径（蒙版）超出蒙版外的像素不会显
复制链接

扫一扫