使用 SVG 输出 Octicon

2016-03-26 W.Y.
SVG
GitHub 不再使用字体来输出图标了。我们把代码中所有的 Octicon 替换成了 SVG 版本。虽然这些改动并不那么明显，但马上你就能体会到 SVG 图标的优点。 切换到 SVG 以后，图标会作为图片渲染而非文字，这使其在任何分辨率下都能很好地以各种像素值显示。 more 为何使用 SVG？ 图标字体渲染问题 图标字体从一开始就是一种 Hack。将图标作为 Unicode 符号生成一个自定义字体，并通过打包后的 CSS 来引入图标，这样只需要在任意元素上添加一个 class，图标就可以显示出来，然后我们通过 CSS 就能即时改变图标的尺寸和颜色。 然而，虽然这些图标是矢量图形，但在 1x 显示屏下的渲染效果并不理想 继续阅读 »

GitBook平台发布教程

2016-12-05 Bruce Wang
gitbook 电子书 教程
最近兴趣所致翻译了一本英文的SVG教程，并将其托管在GitHub，部署于GitBook。为了给大家最直观的效果，献上教程部署地址：https://svg.brucewar.me。这也是我第一次翻译英文文档，也是我第一次使用GitBook部署电子书。教程虽然简单，但基本涉及了SVG的所有知识点。 喂喂喂，跑题了啊！ 回到正题，因为部署电子书涉及的工具比较多，不必担心，我将按以下流程来各个击破： 本地生成电子书 托管GitHub 发布到GitBook 绑定自定义域名 本地生成电子书 GitBook官方提供了一个命令行工具（gitbook），可以使用git和markdown制作本地电子书并支持预览等功能。在安装这个命令行工具之前， 继续阅读 »

test-svg

2018-10-05 张炎泼
svg markdown

认识 D3 数据绑定的魔法

2014-10-24 W.Y.
D3 Visualizations
如果用 D3 来构建一个简单的散点图，我们需要创建一些圆点（circle）来展示你的数据。当你发现 D3 并没有提供内置的方法来同时创建多个 DOM 元素时，也许你会感到惊讶，但是，等等，为什么呢？ more 当然，你可以使用 append 方法来创建单个元素： js svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 2.5); 这仅仅是一个圆点，我们需要的是一系列圆点，每个圆点代表一条数据。当然你可以用 for 循环来创建，但开始之前，请看看下面官方例子中的代码： js svg.selectAll("circle") 继续阅读 »

D3.js（入门篇）

2016-10-24 Bruce Wang
D3 JavaScript
简介 D3.js（后面简称D3，官方首页https://d3js.org/）是基于JavaScript开发的一套用于数据可视化工具，项目开源在GitHub，项目排名靠前。它提供了很多API，如DOM（Document Object Model）的一些操作，绘制图形等。截止本文发表时间，D3已更新到v4，v4在v3的基础上，有了很大的改变（因为v3只支持通过svg和dom构图，所以v4在v3的基础上增加了对Canvas的支持以及API的修改）,本文使用的版本为v3的API。 Hello World html D3.js Hello World 继续阅读 »

D3.js 入门教程系列

2016-09-24 曹强
d3
初识D3 D3是指数据驱动文档（Data-Driven Documents），根据D3的官方定义： D3.js是一个JavaScript库，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准，因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作DOM。----D3维基（2013年8月） 从一个Hello Wordld示例来看看d3如何运行 点击查看在线DEMO ```javascript function render(data){ var demo = d3.select('b 继续阅读 »

D3.js（完整的柱状图）

2016-10-25 Bruce Wang
D3 柱状图
首先，我们先看一下最终的柱状图效果展示。如下图所示，一个完整的柱状图需要包含三个部分：矩形、文字、坐标轴。 添加SVG画布 ```js // 画布大小 var width = 400, height = 400; // 画布四个方向上的留白 var margin = { top: 20, right: 30, bottom: 20, left: 30 }; var chart = d3.select('.chart') .attr('width', width) .attr('height', height) .append('g'); ``` 定义比例尺 js // define x 继续阅读 »

在 Web 开发中生成几何图形的几种方式

2015-07-22 W.Y.
CSS Shapes
当我们在进行 Web 开发时，很多时候都是在有意或无意地创建一些矩形，深究一下，到底有多少中方式来得到一个几何图形呢？本文将简单介绍几种生成圆形、三角形和多边形的方式，并分析每种方式的优缺点。 下面是可能使用到的方式： border-radius border rotating shapes with transform pseudo elements box-shadow wrapping text into shapes with shape-outside clip-path on an element SVG assets canvas more border-radius 使用 border-radius 样式属性是 继续阅读 »

Getting Started with D3

2016-04-18 Jason Liao
D3.js 是一个用来做数据展示的库，可以用它来封装一些成一些基础的数据展示组件，也可以从中学习到 SVG 的知识。现在我们就来学习 D3 吧！ Baisc Methods select() 选择一个区域，进行我们的工作 append() 为这个区域添加一个标签 text 为这个标签添加文本内容 attr() 为添加的标签添加属性 继续阅读 »