前端面试 · 数据可视化相关

月晕
5,414 阅读4分钟

个人的研究方向是数据可视化，在这里记录一下数据可视化碰到的相关问题及对策。完整版参阅：前端小白的面试问题集

1.在使用D3时遇到的困难？

视图设计：将数据的映射成视觉表达时哪些是需要直接展示的，哪些是交互展示的，需要提前设计好数据的结构和要用哪些D3的方法实现，以及考虑数据更新方法。 在交互设计方面尽量采用并行设计的方法，同时提出N套方案进行筛选，减少回滚
视图实现：设计稿的实现遇到放缩尺度/位置的问题(scale/transform)，导致显示效果不好，可以采用其他实现效果好的方法来代替现有方案，重新调整设计思路。还有遇到过一些性能上的问题，比如算法计算慢，延迟高等问题，可以采用调整绘制策略的方法改进。

2.D3的Update和enter的关系是什么

①update(): 当对应的元素正好满足时（绑定数据数量 = 对应元素）
实际上并不存在这样一个函数，只是为了要与之后的 enter 和 exit 一起说明才想象有这样一个函数。但对应元素正好满足时，直接操作即可，后面直接跟 text ，style 等操作即可。
②enter(): 当对应的元素不足时（绑定数据数量 > 对应元素）
当对应的元素不足时，通常要添加元素，使之与绑定数据的数量相等。后面通常先跟 append操作。
③exit(): 当对应的元素过多时 （绑定数据数量 < 对应元素） 当对应的元素过多时，通常要删除元素，使之与绑定数据的数量相等。后面通常要跟 remove 操作。

3.用Canvas和Svg画个饼图

svg和canvas的区别： canvas是html5新增的元素，最初的svg用的是xml技术。 canvs是标量，可以导入图片，svg则是矢量，适合做动态小图标或者地图。 与canvas不同svg的图形可以被引擎抓取，支持事件绑定
简单的Canvas绘图

  1. 获得 canvas 对象.
  2. 调用 getContext 方法, 提供字符串参数 ‘2d’.
  3. 该方法返回 CanvasRenderingContext2D 类型的对象. 该对象提供基本的绘图命令.
  4. 使用 CanvasRenderingContext2D 对象提供的方法进行绘图.
  5. 基本绘图命令
  • 设置开始绘图的位置: context.moveTo( x, y ).
  • 设置直线到的位置: context.lineTo( x, y ).
  • 画弧线：context.arc(x0,y0,radius,startAngle,endAngle);
  • 描边绘制: context.stroke().
  • 填充绘制: context.fill().
  • 闭合路径: context.closePath().
    简单的svg绘图
    style设置：width:500;height:500;background:white;
    viewBox:0 0 100 100 (相对坐标原点(0,0),将500px映射到100个单位中)
  • 常用的标签：
    长方形：<rect x y width height/>左上角坐标、宽度高度；
    多边形：<polygon points/>经过各点的坐标；
    圆：<circle cx cy r/>圆心坐标、半径；
    椭圆：<ellipse cx cy rx ry/>圆心坐标、横轴半径、纵轴半径；
    直线：<line x1 y1 x2 y2 stroke stroke-width/>端点坐标、线颜色、线宽；
    折线：<polyline points fill stroke stroke-width/>经过点的坐标、是否填充、线颜色、线宽；
    文字：<text x y style="font-size:4">文字内容</text>文字坐标、内容、样式；
    路径：<path M(圆心):x,y L(直线):x1,y1, A(扇形):rx,ry flag1,flag2(顺逆时针) fill:填充<br/>>
  • 动态属性：transform移动，其值可以设置为translate(-10,0)向左平移10，scale(1.1)放大1.1倍,rotate(45)旋转45度,transform-origin设置相对位置（相对于整个svg），transform-box：fill-box设置相对位置为中心（相对于当前图形中心）
  • 动画：利用CCS实现动画效果，比如：
#rect {
    animation: move 1s
}
@keyframes move{
    #从1倍变为1.5倍，持续1秒
    0%{transform:scale(1)
    100%{transform:scale(1.5)}
}

4.antV和ECharts的区别

  • Echarts是开箱即用的图表工具，设计出发点是图表。基于每一个图表类型，提供图表中数据相关的图形映射配置以及一些图表间通用的基本组件配置(如axis, legend, tooltip等)。
  • AntV(G2)是提供图形基本元素不同特征到数据的映射方法，实现上更像D3，设计出发点是图形。G2对可视化的理解是微观的、拆解的。这使得G2在数据对图形的控制上要更自由，更抽象通用。你会关心颜色要怎么映射到数据大小上，但是你不需要关心这种类型的图表是否允许你这样去做，这意味着你可能会写出各种非常见的图表类型。当然AntV系也有提供图表层的封装库G2-Plot。同时，Echarts也开始提供dataset、visualMap等功能。

5.可视化设计原则

数据可视化过程：数据→任务→视觉设计→交互设计

  • 数据：
    预处理：属性、聚类、降维、转换
    分类：文本、有序、区间、关系、地理...
  • 任务：
    分析任务、搜索任务、查询任务
  • 视觉设计：
    感知、标记、编码表达、有效性
  • 交互设计：
    交互延时、交互成本、多视图融合

avatar
文章
阅读
粉丝