D3.js的技术预研

最新推荐文章于 2024-05-03 18:08:38 发布

monkey01127

最新推荐文章于 2024-05-03 18:08:38 发布

阅读量235

点赞数

分类专栏：可视化

本文链接：https://blog.csdn.net/weixin_47027124/article/details/115184549

版权

可视化专栏收录该内容

9 篇文章 0 订阅

订阅专栏

背景

目前团队在可视化图表这里采用的Echarts来展示数据，类似也是用第三方组件库提供的API，但在有的时候还是满足不了业务百变的需求。

预研目标

• 使用D3技术实现可视化功能

简介

D3是一个js可视化工具库，功能非常强大，就像给你一张纸和一枝笔，随心所欲，想怎么画就怎么画，非常符合任性的我们。它借助html、svg以及css，可以把我们抽象的数据，形象鲜活的呈现出来。

D3与Echarts的对比

	d3.js	echarts
功能	3D角度画图表	可视化图表库(以图表出发)
区别	太底层，学习成本较大兼容到IE9以上以及所有的主流浏览器 D3通过svg来绘制图形可以自定义事件	封装好的方法直接调用兼容到ie6以及以上的所有主流浏览器 echarts通过canvas来绘制图形封装好的，直接用，不能修改
工作机制	Svg 不依赖分辨率基于xml绘制图形，可以操作dom 支持事件处理器复杂度高，会减慢页面的渲染速度	Canvas 依赖分辨率基于js绘制图形不支持事件处理器能以png或者jpg的格式保存图片
业务场景	交互类(鼠标、键盘、触屏事件操作)	展示数据
灵活性	灵活度高，被评为"限制作品水平的只会是想象力而不再是技术"	方法封装，必须依赖官方提供的图表类型
学习成本	高	低

任何一款工具型产品，在产品设计时都遇到“自由度”和“简便性”两者间的权衡与取舍，而往往这两者很难兼得。
echarts 使用简单而自由度差， d3 自由度好而学习门槛高。

官方学习参考资料：

https://github.com/d3/d3/wiki/API–%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C

为了理解关于 D3 的基本概念，我们从github找到示例，然后对照API了解相关功能，而后就行复杂业务的开发。

简易买一本书来同步学习，先尝试实现简单的图形，如果可以的话最好了解一下函数式编程的curry与compose思想。慕课网入门视频地址：https://www.imooc.com/learn/103

学习之后，完成了几个简易图表的开发，源码地址：https://github.com/monkey01127/d3-demo

实现类似功能代码如下（同为柱形图）：

D3代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" content="">
        <title>for test</title>
    <style type="text/css">
    #container {
      width: 500px;
      height: 250px;
      background: #eee;
    }
    path {
      fill: none;
      stroke-width: 1;
      stroke: #468284;
    }
    .tick line {
      stroke-width: 1;
      stroke: black;
    }
        </style>
    </head>
    <body>
    <div id="container">
  </div>
    <script type="text/javascript" src="d3.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.js"></script>
    <script>
    var svgW = 500,
        svgH = 250,
        margin = {
          left: 50,
          top: 30,
          right: 20,
          bottom: 20
        },
        g_width = svgW - margin.left - margin.right,
        g_height = svgH - margin.top - margin.bottom;
    var svg = d3.select('#container')
    .append('svg')
    .attr('width', svgW)
    .attr('height', svgH);
    var g = d3.select('svg').append('g')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);
    var data = [1, 3, 5, 7, 8, 4, 3, 7]
    // 一个线性比例尺
    var scale_x = d3.scale.linear()
    // 定义域: 坐标系下的值（输入范围）
    .domain([0, data.length - 1])
    // 值域，就是映射到svg画布上的值 （输出范围）
    .range([0, g_width]);
    // 一个线性比例尺
    var scale_y = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([g_height, 0]);
    // 线形图表
    // var line_generator = d3.svg.line()
    //  面积型图表
    var area_generator = d3.svg.area()
    .x(function(d, i) {
      return scale_x(i);
    })
    // .y(function(d) {
    //   return scale_y(d);
    // })
    .y0(g_height)
    .y1(function(d) {
      return scale_y(d);
    })
    .interpolate('cardinal');
    g.append('path')
    // .attr('d', line_generator(data));
    .attr('d', area_generator(data))
    .style('fill', 'steelblue');
    // 创建一个新的轴生成器
    var x_axis = d3.svg.axis().scale(scale_x);
        y_axis = d3.svg.axis().scale(scale_y).orient('left');
    g.append('g')
    .call(x_axis)
    .attr('transform', `translate(0, ${g_height})`);
    g.append('g')
    .call(y_axis)
    .append('text')
    .text('Price($)')
    .attr('transform', `rotate(-90)`)
    .attr('text-anchor', 'end')
    .attr('dy', '1em')
    // .attr('transform', `translate(0, ${g_width})`);
    </script>
    </body>
</html>

echarts

// 按需引入
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/grid');
require('echarts/lib/chart/line');
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        smooth: true,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};
option && myChart.setOption(option);

D3适用场景

• 灵活性高、交互多的业务图表（框架不能实现图表）

难点

• 知识涉及底层，需要花费一定的时间，进行基础知识的学习

结论：

d3完全可以引入团队技术栈，在图表灵活性上加以提高。

monkey01127

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
D3.js的技术预研

背景目前团队在可视化图表这里采用的Echarts来展示数据，类似也是用第三方组件库提供的API，但在有的时候还是满足不了业务百变的需求。预研目标• 使用D3技术实现可视化功能简介D3是一个js可视化工具库，功能非常强大，就像给你一张纸和一枝笔，随心所欲，想怎么画就怎么画，非常符合任性的我们。它借助html、svg以及css，可以把我们抽象的数据，形象鲜活的呈现出来。D3与Echarts的对比d3.jsecharts功能3D角度画图表可视化图表库(以图表出发)区别太底层，学习成本较大兼容到IE
复制链接

扫一扫