• D3.js的学习

    D3.js是一个非常强大的可视化工具，这几天我正在学习相关的知识，主要是我项目里有在使用，觉得D3.js比Echarts强大，和大家一起分享一下，先附上D3.js的官方地址：

    https://iowiki.com/d3js/d3js_introduction.html

    1.先看一个简单的例子：一个黄色的圆的实现

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <title>Document</title>
    7.   <!-- 先去官网把d3.js文件下载下来，然后引入 -->
    8.   <!-- 或者直接这么引入也可以 ，不用下载了-->
    9.   <script src="https://d3js.org/d3.v6.min.js"></script>
    10. </head>
    11. <body>
    12.   <svg width='960' height='500' id='mainsvg' class='svgs'></svg>
    13.   <script>
    14.     let mainSvg = d3.select('.svgs') //选择了svg这个标签
    15.     let maingroup = mainSvg
    16.       .append('g') //在我选择标签时，我会在它里面添加一个组 <g></g>
    17.       .attr('transform', `translate(${100},${100})`) //把这个组向下和向右各平移100个像素
    18.  
    19.     let circle = maingroup
    20.       .append('circle') //attr是设置元素的一个属性，这里代表在组里面添加了一个circle，然后添加了3个属性
    21.       .attr('stroke', 'black') //描边 内圈边 设置为黑色
    22.       .attr('r', '66') //半径是66px
    23.       .attr('fill', 'yellow') //填充颜色是yellow
    24.   </script>
    25. </body>
    26.  
    27. </html>

    可以看到一个黄色的圆：

    2. 使用D3设置SVG的属性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>BarChart!</title>
    8.     <script src="https://d3js.org/d3.v6.min.js"></script>
    9. </head>
    10. <body>
    11.     <svg width='1600' height='800' id='mainsvg' class='svgs'></svg>
    12.     <script>
    13.         const data=[{name:'junxi',value:'3'},
    14.         {name:'wangyang',value:'5'},{name:'lihe',value:'16'},{name:'makui',value:'6'},
    15.         {name:'liwu',value:'6'},{name:'wenliu',value:'8'},{name:'yexuan',value:'3'},
    16.         {name:'guangzhi',value:'9'},{name:'lidan',value:'12'},{name:'chizi',value:'8'},
    17.         {name:'luixiang',value:'7'},{name:'zhangwei',value:'4'},
    18.         {name:'yunpeng',value:'3'},{name:'sunyue',value:'6'}, ]
    19.    
    20.     
    21.       const svg = d3.select('#mainsvg') //选择了svg这个标签的id
    22.       const width=+svg.attr('width')//获取到了SVG标签的宽和高
    23.       const height=+svg.attr('height')
    24.       const margin={top:60,right:30,bottom:60,left:100}//预先给一个magrin，要不然坐标轴可能显示不出来
    25.       const innerWidth=width-margin.left-margin.right//内容宽度
    26.       const innerHeight=height-margin.top-margin.bottom//内容高度
    27.  
    28.       const xScale=d3.scaleLinear()//X轴
    29.        .domain([0,d3.max(data,d=>d.value)])
    30.        .range([0,innerWidth])//最小值是0，宽度就是我们设置的减去magrin后的值
    31.  
    32.       const yScale=d3.scaleBand()//y轴
    33.        .domain(data.map(d=>d.name))
    34.        .range([0,innerHeight])//最小值是0，高度就是我们设置的减去magrin后的值
    35.        .padding(0.1)//每个矩形间距留出1%的位置
    36.  
    37.        const g=svg.append('g').attr('id','maingroup')
    38.        .attr('transform',`translate(${margin.left},${margin.right})`)
    39.  
    40.        const yAxis=d3.axisLeft(yScale)//定义y坐标轴
    41.        .tickSize(-innerWidth)//对轴线的控制
    42.        g.append('g').call(yAxis)//把容器填满
    43.  
    44.        const xAxis=d3.axisBottom(xScale)
    45.        g.append('g').call(xAxis)//默认坐标轴在上方显示
    46.        .attr('transform',`translate(0,${innerHeight})`)//把X轴放在下边显示
    47.  
    48.        data.forEach(d=>{
    49.         g.append('rect')//设置每个人名的柱形图 矩形
    50.         .attr('width',xScale(d.value))
    51.         .attr('height',yScale.bandwidth())//y轴属性稍显特殊
    52.         .attr('fill','green')
    53.         .attr('opacity',0.8)//设置透明度
    54.         .attr('y',yScale(d.name))
    55.        })
    56.  
    57.        d3.selectAll('.tick text').attr('font-size','2em')//设置刻度的字体，单位是em
    58.  
    59.        g.append('text').text('Members of CSCG')//添加一个标题
    60.        .attr('font-size','2em')
    61.        .attr('transform',`translate(${innerWidth/2},0)`)//设置居中显示
    62.        .attr('text-anchor','middle')
    63.     </script>
    64. </body>
    65. </html>

    看一下运行的效果：

    3.data的join属性：使用给定的数据集映射现有文档的元素

    （1）先看一个简单的例子

    1. <body>
    2.     <ul id="list">
    3.         <li></li>
    4.         <li></li>
    5.     </ul>
    6.     <script>
    7.         d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15])
    8.             .text(function (d) {
    9.                 return "此时映射的数据是" + d; //返回前两个数据 10 20 对应文档中定义的两个li元素
    10.  
    11.             })
    12.             .enter() //表示对对剩余数据的访问
    13.             .append("li") //用于从相应数据创建新元素
    14.             .text(function (d) {
    15.                 return "后三个数据是" + d; //返回 30 25 15
    16.             })
    17.     </script>
    18. </body>

     （2）exit（）和remove（）方法

    1. <body>
    2.     <ul id="list">
    3.         <li></li>
    4.         <li></li>
    5.     </ul>
    6.     <input type="button" name="remove" value="移除第四项" onclick="remove()" />
    7.     <script>
    8.         d3.select("#list").selectAll("li")
    9.             .data([10, 20, 30, 25, 15])
    10.             .text(function (d) {
    11.                 return "此时映射的数据是 " + d;
    12.             })
    13.             .enter()
    14.             .append("li")
    15.             .text(function (d) {
    16.                 return "剩余三个数据是 " + d;
    17.             });
    18.  
    19.         function remove() {
    20.             d3.selectAll("li")
    21.                 .data([10, 20, 30, 15])
    22.                 .exit() //从数据集中动态删除的数据项
    23.                 .remove() //把25这一项值删除了
    24.         }
    25.     </script>
    26. </body>

    (3)datum（）方法

    1. <body>
    2.     <p></p>
    3.     <div></div>
    4.     <script>
    5.        d3.select("p")
    6.        .datum(50)//datum（）方法用于为HTML文档中的单个元素设置值,这里为p标签设置了50
    7.        .text(function(d) { 
    8.           return "p的值是 " + d ; 
    9.        });
    10.        d3.select("div")
    11.        .datum(100)//这里为div设置了100
    12.        .append("p")
    13.        .text(function(d) { 
    14.           return "div的值是 " + d ; 
    15.        });
    16.     </script>
    17. </body>

    4.Paths ：路径用于绘制矩形，圆形，椭圆形，折线，多边形，直线和曲线。

    （1）绘制一条简单的线

    1. <!DOCTYPE html>
    2. <meta charset = "UTF-8">
    3.    <head>
    4.       <title>SVG path line Generator</title>
    5.    </head>
    6.    <style>
    7.       path {
    8.          fill: green;
    9.          stroke: #aaa;
    10.       }
    11.    </style>
    12.    <body>
    13.       <svg width = "600" height = "100">
    14.          <path transform = "translate(200, 0)" />
    15.       </svg>
    16.       <script src = "https://d3js.org/d3.v4.min.js"></script>
    17.       <script>
    18.          var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]];
    19.          var lineGenerator = d3.line();//用于创建从当前点到定义的x，y值的线
    20.          var pathString = lineGenerator(data);
    21.          d3.select('path').attr('d', pathString);
    22.       </script>
    23.    </body>
    24. </html>

    看下运行效果：

     5.Selections

    （1）append()方法

    1. <!DOCTYPE html>
    2. <html>
    3.    <head>
    4.       <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
    5.    </head>
    6.    <body>
    7.       <div class = "myclass">
    8.          Hello World!
    9.       </div>
    10.       <script>
    11.          d3.select("div.myclass").append("span");//append（）方法将新元素作为当前选择中元素的最后一个子元素附加
    12.       </script>
    13.    </body>
    14. </html>

    效果展示：

    （2） html()方法：用于设置所选元素的html内容

    1. <!DOCTYPE html>
    2. <html>
    3.    <head>
    4.       <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
    5.    </head>
    6.    <body>
    7.       <div class = "myclass">
    8.          Hello World!
    9.       </div>
    10.       <script>
    11.         //html（）方法用于设置所选/附加元素的html内容。
    12.          d3.select(".myclass").html("Hello World! from D3.js");
    13.       </script>
    14.    </body>
    15. </html>

    看下效果：

    （3）attr（）方法:用于添加或更新所选元素的属性

    1. <!DOCTYPE html>
    2. <html>
    3.    <head>
    4.       <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
    5.    </head>
    6.    <body>
    7.       <div class = "myclass">
    8.          Hello World!
    9.       </div>
    10.       <script>
    11.         //attr（）方法用于添加或更新所选元素的属性
    12.         //  d3.select(".myclass").attr("style", "color: red");
    13.         d3.select(".myclass").style("color", "red");//等价于上面的代码
    14.       </script>
    15.    </body>
    16. </html>

    看下效果：

    (4)  classed()方法：用于设置HTML元素的“class”属性。

    1. <!DOCTYPE html>
    2. <html>
    3.    <head>
    4.       <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
    5.    </head>
    6.    <body>
    7.       <div class = "myclass">
    8.          Hello World!
    9.       </div>
    10.       <script>
    11.         d3.select(".myclass").classed("myanotherclass", true);//Add class - 要添加类，必须将分类方法的第二个参数设置为true
    12.         d3.select(".myclass").classed("myanotherclass", false);//要删除类，必须将分类方法的第二个参数设置为false
    13.       </script>
    14.    </body>
    15. </html>

    （5）selectAll（）：用于选择HTML文档中的多个元素

    1. <!DOCTYPE html>
    2. <html>
    3.    <head>
    4.       <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
    5.    </head>
    6.    <body>
    7.       <h2 class = "myclass">Message</h2>
    8.       <div class = "myclass">
    9.          Hello World!
    10.       </div>
    11.       <script>
    12.          d3.selectAll(".myclass").attr("style", "color: red");
    13.       </script>
    14.    </body>
    15. </html>

    看下效果：

    6.Drawing Charts

    （1）条形图

    1. <html>
    2. <head>
    3.     <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
    4.     <style>
    5.         svg rect {
    6.             fill: gray;
    7.             /* 设置矩形颜色 */
    8.         }
    9.  
    10.         svg text {
    11.             fill: yellow;
    12.             /* 文本颜色 */
    13.             font: 12px sans-serif;
    14.             text-anchor: end;
    15.         }
    16.     </style>
    17. </head>
    18. <body>
    19.     <script>
    20.         var data = [10, 5, 12, 15];
    21.         var width = 300 //SVG的宽度
    22.         scaleFactor = 20, //缩放到屏幕上可见的像素值
    23.             barHeight = 30; //水平条的静态高度
    24.         var graph = d3.select("body")
    25.             .append("svg") //添加SVG元素
    26.             .attr("width", width)
    27.             .attr("height", barHeight * data.length);//高度计算为条形高度*数据值的数量
    28.         var bar = graph.selectAll("g")//附加组元素
    29.             .data(data)
    30.             .enter()
    31.             .append("g")
    32.             .attr("transform", function (d, i) {
    33.                 return "translate(0," + i * barHeight + ")";
    34.             });
    35.         bar.append("rect").attr("width", function (d) {//将rect元素添加到栏中
    36.                 return d * scaleFactor;
    37.             })
    38.             .attr("height", barHeight - 1);
    39.         bar.append("text")
    40.             .attr("x", function (d) {
    41.                 return (d * scaleFactor);
    42.             })
    43.             .attr("y", barHeight / 2)//宽度定义为（数据值*比例因子）
    44.             .attr("dy", ".35em")//文本元素不支持填充或边距,设置一个“dy”偏移量
    45.             .text(function (d) {
    46.                 return d;
    47.             });
    48.     </script>
    49. </body>
    50.  
    51. </html>

     看下效果：

    （2） 圆图

    1. <html>
    2.  
    3. <head>
    4.     <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
    5. </head>
    6.  
    7. <body>
    8.     <script>
    9.         var width = 400; //SVG的宽度
    10.         var height = 400; //SVG的高度
    11.         var data = [10, 20, 30]; //数据元素数组
    12.         var colors = ['green', 'purple', 'yellow']; //将颜色应用于圆形元素
    13.  
    14.         var svg = d3
    15.             .select("body") //添加SVG元素
    16.             .append("svg")
    17.             .attr("width", width)
    18.             .attr("height", height);
    19.  
    20.         var g = svg.selectAll("g") //创建用于保持圆圈的组元素
    21.             .data(data) //将我们的数据数组绑定到组元素
    22.             .enter() // 为我们的组元素创建占位符
    23.             .append("g") //将组元素添加到我们的页面
    24.             .attr("transform", function (d, i) {
    25.                 return "translate(0,0)"; //相对于原点定位元素
    26.             })
    27.  
    28.         g.append("circle") //将圆形元素附加到组中
    29.             .attr("cx", function (d, i) { //将属性添加到组中
    30.                 return i * 75 + 50;
    31.             })
    32.             .attr("cy", function (d, i) {
    33.                 return 75;
    34.             })
    35.             .attr("r", function (d) { //设置每个圆的半径
    36.                 return d * 1.5; //半径乘以数据值以及常数“1.5”以增加圆的大小
    37.             })
    38.             .attr("fill", function (d, i) {
    39.                 return colors[i]; //填充每个圆圈的颜色
    40.             })
    41.  
    42.         g.append("text").attr("x", function (d, i) { //显示每个圆圈上的数据
    43.                 return i * 75 + 25;
    44.             })
    45.             .attr("y", 80)
    46.             .attr("stroke", "teal")
    47.             .attr("font-size", "10px")
    48.             .attr("font-family", "sans-serif").text(function (d) {
    49.                 return d;
    50.             });
    51.     </script>
    52. </body>
    53.  
    54. </html>

    看下效果：

    就先写这么多，具体的各位还是看官方教程，挺详细的。 

  • 相关阅读:
    重要功能丨支持1688API 接口对接一键跨境铺货及采购，解决跨境卖家货源烦恼！
    java设计模式（一）——五种创建型设计模式
    【计算机视觉】MoCo v3 讲解
    【Spring源码】8. 捋下invokeBeanFactoryPostProcessors()主要处理流程
    django —— 搭建项目及简单测试
    HashMap在JDK1.7和JDK1.8中有哪些不同？HashMap的底层实现
    利用Jmeter做接口测试（功能测试）全流程分析
    移动应用安全需求分析与安全保护工程
    赛码网的输入规则（Jsv8）
    Selenium IDE 工具
  • 原文地址：https://blog.csdn.net/huihui_999/article/details/127707002