WanFengZ

打包 css 主要用到的 loader 是 style-loader 和 css-loader。css-loader 的作用是处理在 js 中引入的css。另外如果我们用到...

CSS，就是这个看似不起眼的家伙，却在开发中发挥着和js一样重要的作用。css，是一种样式脚本，好像和编程语言有着一定的距离，我们可以将之理解为一种描述方法。这似乎导致cs...

提取公共代码要借助 webpack 的 CommonsChunkPlugin 插件（v4 已移除），另外这个插件是不支持单入口的公共代码块提取的。 在打包结果中，lodas...

随着前端技术的发展，前后端开发的分离，前端项目的构建显得越来越有必要，而 Webpack 就是一个前端的打包工具，帮助我们完成前端项目的构建。 前端的项目构建工具也逐渐的由...

感谢 Babel 的 TypeScript 插件（@babel/preset-typescript），TypeScript 从未变得如此简单，这是 TypeScript 和...

nuxt 是基于 vue 开发的一个应用框架，最常用的就是拿来做 ssr。那么什么是 ssr 呢，这就要提及一个相对的概念：csr。 web网页开发从之前的 jsp，php...

其实有很多有用的东西，当时学习了，也记住了，但是时间久了就是记不住，所以导致在日常开发中总是想不起来原来这个东西可以这么用，而去选择了更加复杂和麻烦的方式。其实我们日常学习...

这里使用的是 topoJSON 而非是 geoJSON 数据。网站也有许多网站能够转化文件。 我们定义了一个地图的 path 生成器，通过 projection 方法设置生...

可以看见我们生成的小圆点互相之间有了引力和斥力，d3 内置的 force 模块帮助我们在 web 页面中通过算法模拟实现了物理的力学效果。 d3.forceSimulati...

最近有些懒, 加上公司项目较多, 没有来得及更。这次选题比较纠结, 本来想继续围绕webpack, 但无奈在私下和一些同学聊天时, 无意中发现大部分同学对Js运行机制和内存...

在创建弧度区域时，我们调用 d3.arc() 常常需要数据项内有固定在 [0, 2 * Math.PI] 的值来指定弧度片段的起始角度，但是实际上我们的数据内只有数据数值，...

你可以完全使用console.warn来代替console.log方法，但前提是该条打印信息是属于警告级别而不是普通信息级别，因此浏览器遇到一条警告级别的信息会区别对待，最...

我们用工厂模式，areaChart 返回一个 chart对象，我们可以向其设置渲染数据和一些可以自定义的属性项，渲染的逻辑放在 render() 函数中。 坐标轴只会在sv...

d3 的生成器可以帮助我们将数据映射到svg的属性中，简化了我们对svg的操作。线条生成器就可以帮助我们十分简单的绘制路径。 在图表中，我们的线条是用 path 绘制的而不...

d3 的过渡是设计是非常好的，基于核心插值器的过渡动画让我们可以通过短短几行代码就可以满足项目所需的动画效果，让数据的展示效果更加优秀。 selection.transit...

坐标轴是借于svg来渲染的，所以我们首先在body下添加了个svg元素，然后我们就要在svg上开始绘制坐标轴。 我们通过offset来使坐标轴位置错开。 坐标轴的刻度是依赖...

d3中的尺度就如同数学中映射的概念，从定义域映射到值域，d3中尺度初学其实掌握好连续尺度，有序尺度就足够后面的应用了。 连续尺度可以帮我们将连续的定义域映射到一个连续的值域...