为什么我不再使用 D3.js

栏目: 编程语言 · 发布时间: 5年前

内容简介：这周读到关于 D3.js 的D3 在 2011 发布的时候，可谓是一项极大的创新。那时候还是 jQuery 和 Backbone 的天下，浏览器也只是实现了一些简单的 css 标准如 “transitions” 等，像现在更为复杂的 ”flex” 布局还遥遥无期。D3 通过数据驱动来绘制图形的方式解决了这方面的难题，迅速笼络人心。

为什么我不再使用 D3.js

这周读到关于 D3.js 的一篇文章，想起 D3.js 当年也是叱咤风云，而现在感觉已经消声灭迹很久了。以下就是我对它的理解与翻译。

D3 在 2011 发布的时候，可谓是一项极大的创新。那时候还是 jQuery 和 Backbone 的天下，浏览器也只是实现了一些简单的 css 标准如 “transitions” 等，像现在更为复杂的 ”flex” 布局还遥遥无期。D3 通过数据驱动来绘制图形的方式解决了这方面的难题，迅速笼络人心。

然而时代终究还是变了。现在的框架采用了虚拟 DOM 等更为灵活和强大的设计理念，CSS 在布局和动画方面也游刃有余。

让我再多给你举几个例子。

D3 的学习曲线

过去几年我一直在使用 D3，并用它绘制了各种各样的图形曲线。然而一个问题就是，虽然我理解关于 D3 的基本概念，但我还是难以做到轻车熟路，我身边的同事跟我也是同样的感受。和大多数人一样，许多时候，我们都是从网上找到一个示例，然后将它修改为实际工程中所需要的。

如果我们想要添加一些新奇的功能，就需要不停的搜索，不停的尝试，不停的修改，直到它看起来是我们想要的了。

听起来是不是很熟悉？现在的开发者们已经非常熟悉虚拟 DOM 和模板编程。掌握这么一个设计理念与思考方式与现在其他库大相径庭的技巧，看起来并没什么卵用。

绘制曲线，它实际上并不难！

如果让你自己从头写一个图表的话，你大概会感到不安和紧张，就好像自己要面临一个非常复杂的问题，但当你开始写的时候一切都变得简单起来。我们先来看一下如何使用 D3 画一副折线图：

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
// parse the date / time
var parseTime = d3.timeParse("%d-%b-%y");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");
// Get the data
d3.csv("data.csv", function(error, data) {
  if (error) throw error;
// format the data
  data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.close = +d.close;
  });
// Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);
// Add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
// Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
});

我们再来看一下在 Preact 中如何绘制：

/* @jsx h */
let { Component, h, render } = preact
function getTicks (count, max) {
    return [...Array(count).keys()].map(d => {
        return max / (count - 1) * parseInt(d);
    });
}
class LineChart extends Component {
    render ({ data }) {
        let WIDTH = 500;
        let HEIGHT = 300;
        let TICK_COUNT = 5;
        let MAX_X = Math.max(...data.map(d => d.x));
        let MAX_Y = Math.max(...data.map(d => d.y));
        
        let x = val => val / MAX_X * WIDTH;
        let y = val => HEIGHT - val / MAX_Y * HEIGHT;
        let x_ticks = getTicks(TICK_COUNT, MAX_X);
        let y_ticks = getTicks(TICK_COUNT, MAX_Y).reverse();
                
        let d = `
          M${x(data[0].x)} ${y(data[0].y)} 
          ${data.slice(1).map(d => {
              return `L${x(d.x)} ${y(d.y)}`;
          }).join(' ')}
        `;
    
        return (
            <div 
                class="LineChart" 
                style={{
                    width: WIDTH + 'px',
                    height: HEIGHT + 'px'
                }}
            >
                <svg width={WIDTH} height={HEIGHT}>
                    <path d={d} />
                </svg>
                <div class="x-axis">
                    {x_ticks.map(v => <div data-value={v}/>)}
                </div>
                <div class="y-axis">
                    {y_ticks.map(v => <div data-value={v}/>)}
                </div>
            </div>
        );
    }
}
let data = [
    {x: 0, y: 10}, 
    {x: 10, y: 40}, 
    {x: 20, y: 30}, 
    {x: 30, y: 70}, 
    {x: 40, y: 0}
];
render(<LineChart data={data} />, document.querySelector("#app"))

CSS 代码：

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 14px;
}
.LineChart {
    position: relative;
    padding-left: 40px;
    padding-bottom: 40px;
}
svg {
    fill: none;
    stroke: #33C7FF;
    display: block;
    stroke-width: 2px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}
.x-axis {
    position: absolute;
    bottom: 0;
    height: 40px;
    left: 40px;
    right: 0;
    display: flex;
    justify-content: space-between;
}
.y-axis {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.y-axis > div::after {
    margin-right: 4px;
    content: attr(data-value);
    color: black;
    display: inline-block;
}
.x-axis > div::after {
    margin-top: 4px;
    display: inline-block;
    content: attr(data-value);
    color: black;
}

看起来有许多的代码，但你应该注意到，我是用自己已经掌握的 Preact 框架（其他框架也一样，React、Vuew、Angular 等等）和 CSS 来绘制的。如果使用 D3 的话，那么首先你要了解一大堆的概念 … 但现在你只需要掌握自己正在使用的库，就能基于它做出更多的修改了。

看看它的打包大小

最坏情况下，D3 可能要引入大概 70+ 字节的代码。如果你仅仅是想调用一行函数，那么引入这么大的一个第三方库真的合适吗？

通常 Canvas 和 HTML 要优于 SVG

不知道你有没有注意到，上述代码我使用了 SVG 来帮助我绘制图形，绘制图形的时候人们总想用大量的 SVG 来完成任务。然而 CSS 已经今非昔比，它的崛起让 SVG 相形见绌。例如，在 SVG 中实现文字环绕的效果需要自己使用 JavaScript 代码动态计算：

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null)
           .append("tspan")
           .attr("x", 0)
           .attr("y", y)
           .attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan")
           .attr("x", 0)
           .attr("y", y)
           .attr("dy", ++lineNumber * lineHeight + dy + "em")
           .text(word);
      }
    }
  });
}

而使用 CSS 仅需要一行 white-space: normal 。利用 CSS 的 transform 和 border-radius 基本上可以绘制任何基本图形。我现在之所以还是用 SVG 的唯一原因就是 <path> 标签，它是创建任意图案的绝佳助手。

如果你想要再进一步提升性能，那么可以选择在 Canvas 中进行绘制，相比于其它两种方式，它能占用更少的内存，更新也更快。

你可能会反驳我说 Canvas 不能像 SVG 那样任意放大和缩小图案，当放大 Canvas 的时候，页面上的图案开始变得模糊不清。这是因为你在放大页面的时候，并没有相应的修改 Canvas 的宽度和高度，以下是这一问题的解决方案：

onResize() {
    let canvas = this.base.querySelector('canvas');
    let ctx = canvas.getContext('2d');
    let PIXEL_RATIO = window.devicePixelRatio;
    canvas.width = canvas.offsetWidth * PIXEL_RATIO;
    canvas.height = canvas.offsetHeight * PIXEL_RATIO;
    ctx.setTransform(PIXEL_RATIO, 0, 0, PIXEL_RATIO, 0, 0);
    
    this.props.onDraw(ctx, canvas.offsetWidth, canvas.offsetHeight);
}

总结

如上所示，有种种原因表明 D3 现在已经过时了，自它发布之日到现在，前端已经发生了巨变。如果你只是画一些简单的图标，例如条形图、折线图等，那就先思考一下如何在你正在使用的框架中完成这些任务。而且，在代码维护方面这样也更加便捷。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Mastering Bitcoin

Andreas M. Antonopoulos / O'Reilly Media / 2014-12-20 / USD 34.99

Mastering Bitcoin tells you everything you need to know about joining one of the most exciting revolutions since the invention of the web: digital money. Bitcoin is the first successful digital curren......一起来看看《Mastering Bitcoin》这本书的介绍吧!

码农工具