WanFengZ

打包 css 主要用到的 loader 是 style-loader 和 css-loader。css-loader 的作用是处理在 js 中引入的css。另外如果我们用到了 css 预编译，如 sass，则我们还需要 sass-loader 和 node-sass(node环…

提取公共代码要借助 webpack 的 CommonsChunkPlugin 插件（v4 已移除），另外这个插件是不支持单入口的公共代码块提取的。 在打包结果中，lodash 被提取到了 vendor.bundle.js，subPageA、subPageB、subPageMod…

随着前端技术的发展，前后端开发的分离，前端项目的构建显得越来越有必要，而 Webpack 就是一个前端的打包工具，帮助我们完成前端项目的构建。 前端的项目构建工具也逐渐的由借助其他语言的构建工具，到使用 Grunt，后来被 Stream 概念的 Gulp 所取代，再到现在的 R…

nuxt 是基于 vue 开发的一个应用框架，最常用的就是拿来做 ssr。那么什么是 ssr 呢，这就要提及一个相对的概念：csr。 web网页开发从之前的 jsp，php 转向现在的三大框架 angular react vue，其实就是从 csr 到 ssr 的转变，即从服务…

这里使用的是 topoJSON 而非是 geoJSON 数据。网站也有许多网站能够转化文件。 我们定义了一个地图的 path 生成器，通过 projection 方法设置生成器的投影方式。然后我们通过 topojson 拿到 地图数据中各个州的数据，通过 path 元素和生成器…

可以看见我们生成的小圆点互相之间有了引力和斥力，d3 内置的 force 模块帮助我们在 web 页面中通过算法模拟实现了物理的力学效果。 d3.forceSimulation - 创建一个新的力学仿真. simulation.restart - 重新启动仿真的定时器. sim…

在创建弧度区域时，我们调用 d3.arc() 常常需要数据项内有固定在 [0, 2 * Math.PI] 的值来指定弧度片段的起始角度，但是实际上我们的数据内只有数据数值，d3.pie() 就可以帮我们实现对数据的结构的转化。这种性质的方法被称为布局。 pie.value() …

我们用工厂模式，areaChart 返回一个 chart对象，我们可以向其设置渲染数据和一些可以自定义的属性项，渲染的逻辑放在 render() 函数中。 坐标轴只会在svg初始化的时候渲染一次。注意我们这里是将坐标轴和图表内容主题分开的。 renderAxes() 里面就是熟…

d3 的生成器可以帮助我们将数据映射到svg的属性中，简化了我们对svg的操作。线条生成器就可以帮助我们十分简单的绘制路径。 在图表中，我们的线条是用 path 绘制的而不是 line，我们用line生成器来对数据进行处理，直接生成了 path 的 d 属性而不用我们去计算。 …