可视化基础（4）

最新推荐文章于 2024-08-25 12:02:38 发布

雍仲

最新推荐文章于 2024-08-25 12:02:38 发布

阅读量234

点赞数

文章标签：可视化 html d3.js 前端

本文链接：https://blog.csdn.net/weixin_45475077/article/details/109318110

版权

这篇博客介绍了D3.js这个JavaScript可视化库，通过SVG和HTML展示数据。内容包括如何创建简单的和完整的柱形图、关系图、力导向图以及饼状图，适合前端开发者学习D3.js的基础知识。

摘要由CSDN通过智能技术生成

D3

D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库。 D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来。 D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术，让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。我们在理解的时候，他其实就是比echarts灵活和基础。

一个简单的柱形图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
</head>
<body>
  <svg id='svg' width="960" height="600"></svg>
  <script>
    var marge = {
    top:60,bottom:60,left:60,right:60}//设置边距
    var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
    var svg = d3.select("#svg");//得到svg画布
    var g = svg.append("g")//定义一个用来装整个图表的一个分组，并设置他的位置
      .attr("transform","translate("+marge.top+","+marge.left+")");
    
    var rectHeight = 30;//设置每一个矩形的高度
    
    g.selectAll("rect") // 从当前文档中选择多项元素。
      .data(dataset) //设置或获取一组元素的绑定数据
      .enter() // 返回缺失元素的占位对象（placeholder），指向绑定的数据中比选定元素集多出的一部分元素。
      .append("rect")// 创建并添加新元素到选定元素后。
      .attr("x",200)//设置左上点的x 也就是当前rect的横向偏移
      .attr("y",function(d,i){
    //设置左上点的y
        return i*rectHeight;
      })
      .attr("width",function(d){
    //设置宽
        return d;
      })
      .attr("height",rectHeight-5)//设置长
      .attr("fill","blue");//颜色填充
  </script>
</body>
</html>

一个完整的柱形图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <svg width="960" height="600"></svg>
    <script>
    	var marge = {
    top:60,bottom:60,left:60,right:60}
    	var svg = d3.select("svg");//得到SVG画布
    	var width = svg.attr("width");//得到画布的宽
    	var height = svg.attr("height");//得到画布的长
    	var g = svg.append("g")//定义一个用来装整个图表的一个分组，并设置他的位置
    		.attr("transform","translate(60，60)");
    	
    	var dataset = [10,20,30,23,13,40,27,35,20];
   
      // 分别在x方向和y方向绘制坐标轴
    	var xScale = d3.scaleBand() // 是一个坐标轴，可以根据输入的domain的长度，等分rangeRound域（类比range域）
    		.domain(d3.range(dataset.length))
    		.rangeRound([0,width-marge.left-marge.right]);//横轴 等分8分 从0 到 最右边
    	var xAxis = d3.axisBottom(xScale); // 
    		
    	var yScale = d3.scaleLinear()
    		.domain([0,d3.max(dataset)])
    		.range([height-marge.top-marge.bottom,0]); // 纵轴 从底边到最上边 数值从0 到最大值
    	var yAxis = d3.axisLeft(yScale);
      
      
    	g.append("g")
    		.attr("transform","translate("+0+","+(height-marge.top-marge.bottom)+")")
    		.call(xAxis); //放入 x轴
    	g.append("g")
    		.attr("transform","translate(0,0)")
    		.call(yAxis); // 放入y轴
    		
    	//绘制矩形和文字
    	var gs = g.selectAll("rect")
    		.data(dataset)
    		.enter()
    		.append("g")