• 放在 components 里的不要叫 XxxPage，Page 可以去掉。
• 大写开头。
• 所有 bannerSVG() 的函数调用都改成 coverImage={<BannerSVG />} bannerSVG={<BannerSVG />}。
• Quotes 也可以提到主题里，感觉其他网站未来也用得上。不过这个不着急。
• i18n.options.keySeparator = '>'; 去掉，提过的。#23 (comment)

兼容一下 antvis/gatsby-theme-antv#240 ，首页通告读取 https://github.com/antvis/antvis-sites-data 的数据。

Originally posted by @afc163 in #84 (comment)

😄

When I visit the url "https://antv.alipay.com/zh-cn/vis/chart/venn.html#_%E9%9F%A6%E6%81%A9%E5%9B%BE", it always redirect to "https://antv.vision" which is annoying.

Please spend some time to figure it out for user's experience~

Thx!

当图中有多个节点时，添加一个节点能提示对齐线，类似PPT，可以与相近位置的横向或竖向进行对齐

欢迎来到 2.1.X 时代

前言

随着可视化进入深水区，G2面临了越来越多交互上的需求。动画是提升交互必不可少的一部分，也是之前G2的薄弱环节。这个版本里我们开发并替换了动画底层，统一了时间轴，使G2的动画性能大大提升，并提供了一套默认的交互动画，使G2图表的表现力更加丰富。

默认动画

render() 出场动画

changeData() 数据变更动画

filter() 过滤动画

coord() 坐标系变换动画

自定义动画

通过Animate 接口

默认动画会同时出现。这样会引起视觉上的混乱。

我们可以通过自定义动画接口，将点图的出现时间稍做延迟。代码片段

当然我们还能通过自定义Aniamte 作出更细致的动画效果代码片段

结合自定义Shape

G2 的自定义Shape功能允许我们直接操作图形对象。借助这个入口，配合动画接口shape.animate()，能实现复杂的动画。
代码片段

欢迎登录 G2官网 体验！

之前有过类似图谱的需求

在展开下一级的情况下，如果上一级还展示，数据会比较乱，上级展示也没有多大意义（也许有一点是用户不知道再次点击回到上级）。

所以想的是把父类的关闭，这样数据展示会比较直观。

之前写过的例子 ： Example

现在新版的文档网站全部开启了平滑滚动，这个特性导致了页面使用效率不高。尤其是在内容比较多的页面中进行搜索时（例如 https://g2.antv.vision/zh/docs/api/g2 ），页面滚动占用了过多时间，能否关闭平滑滚动特性，或是加快一下页面的滚动速度？

可以参考 https://xtech.antfin.com/ 的实现方式。

问题和修改建议和之前的播放按钮完全一样，如果其他地方也有类似的实现也需要一起改掉。

https://antv-g6.gitee.io/zh/examples/case/largeGraph#index

点击查看源码，访问下面的链接：

https://github.com/antvis/G6/blob/master/site/pages/largegraph.zh.tsx

已经404了

有同学反馈，legend 被截断了

https://antv.alipay.com/zh-cn/g2/3.x/tutorial/data-set.html

注: 用pc浏览器打开，效果更好（微信中打开会被屏蔽，建议用pc浏览器打开）

今天蚂蚁金服发布了一套数据可视化规范AntV。

AntV 是一套专业的数据可视化规范，这套规范的目的是为了让可视化的使用者更懂数据可视化。这套规范是蚂蚁金服在可视化建设过程中的理论沉淀，它可以很好得指引产品经理，设计师和工程师怎样正确得使用可视化及可视化技术，规避常见的错误，可以当学习材料，也可以作为手册使用。

官方地址：https://antv.alipay.com/

30 多种可视化图表的详细介绍

规范中总结了常用的 30 多种图表的特性（不断增加）。每篇图表介绍中包括：基本介绍，图表起源，图表的构成，图表的应用场景，错误的使用场景，该图表的扩展及该图表G2引擎上的实现。

它是图表的一站式站点

图表分类

AntV为这些图表做了一系列的分类，更好的组织这些图表，使用者进来后可以根据自己的目的很容易找到对应的图表。

设计规范

AntV内置了一套设计规范，这个设计规范可以很好的指导设计师为图表选择合适的设计元素。

欢迎使用及反馈

欢迎使用 https://antv.alipay.com/

您使用这套规范中，如果您发现哪里写的不准确或者有更好的建议，请在这个页面给我们反馈。https://github.com/antvis/feedback/issues/new

该规范中的所有图表均有G2可视化引擎实现，欢迎查看http://g2.alipay.com/。

1. 左边菜单里存在冗余的菜单选项，应该移除。

在测试中没发现什么问题，请问是否官方为做i9兼容性测试

节点可以作为容器，可以为容器节点添加子节点，可以获取容器节点下的子节点数组，当容器节点移动时子节点一起移动，可以单独选择子节点。

注: 用pc浏览器打开，效果更好（微信中打开会被屏蔽，建议用pc浏览器打开）

蚂蚁金服发布新一代数据可视化引擎G2

G2有一个高大上的名字叫做：The Grammar Of Graphics——图形语法。它是一个强大的语义化图表生成工具，它提供了一整套图形语法，可以让用户通过简单的语法搭建出无数种图表，并且集成了大量的统计工具，支持多种坐标系绘制，可以让用户自由定制图表，是为大数据时代而准备的强大可视化工具。

官方地址：(https://g2.alipay.com/)

试用G2

G2和传统的图表系统（HighCharts，ACharts等）不同，G2是一个基于统计分析的语义化数据可视化系统。它真正做到了让数据驱动图形，让你在使用它时候不用关心绘图细节，只需要知道你想通过它怎么展示你关心的数据。是蚂蚁金服推出的可视分析解决方案。

你手上可能有数据，但是不知道如何展示，不知道如何使用可视化的方法来分析数据。现在有了G2一切都可以解决了！

下面让我们看看它的威力，它的便捷程度简直是丧心病狂：

为了能演示它的威力，我们特别做了这个试用页面，请大家打开这个页面http://antvis.github.io/exec.html，按照下面的gif演示过程试用下G2，任何一个人都可以使用它完成利用图形的力量分析处理数据的过程。

介绍数据

首先我们已经给你们准备好了一份测试数据(R语言中常用的钻石数据)，当然你也可以使用你自己的测试数据（载入方法和数据格式后面说）。这份数据是一份钻石数据，大约有1000颗钻石，每颗钻石都是一行数据，每行数据都有关于这颗钻石的参数比如4C参数(carat, cut, color, clarity), 外形参数(depth, width, x, y, z), 价格参数(price)。如图：

最初的需求

让我们先来一个最简单的需求，对于钻石大家肯定最关心的就是钻石的大小和其价格之间的关系。请跟着我们边打下面这行代码边默念接着的这句话: 显示一个图表，使用点来表示每行数据，其中把carat(克拉)映射到位置信息(position)中的x轴，把price（价格）映射到位置信息(position)中的y轴。点击执行。哈！ 我们称这个概念叫做映射，它可以帮助你把数据中你关心的字段映射到图形空间。

chart.point().position('carat*price');

更多的映射

让我们再加入更多的映射试试，我们把cut(切割工艺)映射为图形的颜色, 把clarity(纯净度)映射为图形的形状。

chart.point().position('carat*price').color('cut').shape('clarity');

我们数据的更多维度展示在了图形上。可以被映射的属性叫做视觉通道。

分面

但是刚才那个图中虽然展示了四维的信息，但是各个维度都叠加在一起，不利于观察，这个时候我们就可以使用一些特别的技巧了，其中一个技巧叫分面。它可以将原来的一个图形按照某种分类规则阵列成一个矩阵，或者一个圆环等。这样可以单独观察某种条件下的图形并形成对比。水平方向按照cut阵列，垂直方向按照clarity阵列。

chart.point().position('carat*price').color('cut').shape('clarity');
chart.facet(['cut', 'clarity']);

下面这两个分别是仅仅水平阵列，仅仅垂直阵列。

chart.point().position('carat*price').color('cut').shape('clarity');
chart.facet(['cut']);

chart.point().position('carat*price').color('cut').shape('clarity');
chart.facet([, 'clarity']);

更换demo的数据

这个章节的内容不属于G2，仅仅是教大家怎么更换训练页中的测试数据。这个页面可以训练你使用G2。拿自己关心的数据进行测试才是开心的哈！

数据格式： G2假定的数据格式只有一种，就是一个数组，其中每个对象（简单对象）是一行数据，对象中的字段名就是列名，值就是当前行中对应列的值。下面是一份tokyo，newYork，berlin各个城市间不同月份气温的数据。

[
    {"month":0,"tem":7,"city":"tokyo"},
    {"month":1,"tem":6.9,"city":"tokyo"},
    {"month":2,"tem":9.5,"city":"tokyo"},
    {"month":3,"tem":14.5,"city":"tokyo"},
    {"month":4,"tem":18.2,"city":"tokyo"},
    {"month":5,"tem":21.5,"city":"tokyo"},
    {"month":6,"tem":25.2,"city":"tokyo"},
    {"month":7,"tem":26.5,"city":"tokyo"},
    {"month":8,"tem":23.3,"city":"tokyo"},
    {"month":9,"tem":18.3,"city":"tokyo"},
    {"month":10,"tem":13.9,"city":"tokyo"},
    {"month":11,"tem":9.6,"city":"tokyo"},
    {"month":0,"tem":-0.2,"city":"newYork"},
    {"month":1,"tem":0.8,"city":"newYork"},
    {"month":2,"tem":5.7,"city":"newYork"},
    {"month":3,"tem":11.3,"city":"newYork"},
    {"month":4,"tem":17,"city":"newYork"},
    {"month":5,"tem":22,"city":"newYork"},
    {"month":6,"tem":24.8,"city":"newYork"},
    {"month":7,"tem":24.1,"city":"newYork"},
    {"month":8,"tem":20.1,"city":"newYork"},
    {"month":9,"tem":14.1,"city":"newYork"},
    {"month":10,"tem":8.6,"city":"newYork"},
    {"month":11,"tem":2.5,"city":"newYork"},
    {"month":0,"tem":-0.9,"city":"berlin"},
    {"month":1,"tem":0.6,"city":"berlin"},
    {"month":2,"tem":3.5,"city":"berlin"},
    {"month":3,"tem":8.4,"city":"berlin"},
    {"month":4,"tem":13.5,"city":"berlin"},
    {"month":5,"tem":17,"city":"berlin"},
    {"month":6,"tem":18.6,"city":"berlin"},
    {"month":7,"tem":17.9,"city":"berlin"},
    {"month":8,"tem":14.3,"city":"berlin"},
    {"month":9,"tem":9,"city":"berlin"},
    {"month":10,"tem":3.9,"city":"berlin"},
    {"month":11,"tem":1,"city":"berlin"}
  ]

只要是这种类型的数据，G2都是可以接受的。

你只需要将这份数据拷入，训练页面中的数据框中，点载入按钮即可。如下图操作

超越点图

细心的读者可能发现，我们一直演示的都是点图。那我们能不能画其他图形呢？答案是肯定的。下面就使用刚刚载入的温度数据画线图。这句话是将月份映射为x，温度映射为y，不同city城市用不同的颜色，使用线来表示根据颜色分组出的数据。 见下图：

chart.line().position('month*tem').color('city');

这个时候你可能觉得下面显示的数字而不是一，二，三等中文数字，不符合视觉阅读习惯。你可以更改数据列的定义方式。

chart.col('month',{ // 定义列，指定月份对应的中文
    type: 'cat',
    values: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
  });
chart.line().position('month*tem').color('city');

这样x显示的就是中文了。如图：

坐标系变换

除了上面的特性，还有一个很有意思的特性就是修改图形所在的坐标系。我们可以轻易的将一个图从二维直角空间转换为极坐标空间。见下图

chart.coord('polar');
chart.col('month',{ // 定义列，指定月份对应的中文
    type: 'cat',
    values: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
  });
chart.area().position('month*tem').color('city');

统计

G2还可以帮你做统计。可视化就是利用图形的力量对数据做处理进而分析。可视化和统计密不可分的。下面就是一个做统计的例子，更多例子欢迎这里观看文档。这个图意思是将cut映射为x，price映射为y，真对每种cut计算它对应的price最大值，使用区间（interval，你可以暂时理解为柱状图）来表示每个cut的最大值，为不同的cut使用不同的颜色。见下图：

chart.interval().position(Stat.summary.max('cut*price')).color('cut');

无穷多的图表

今天介绍了很多概念，例如映射，图形种类，视觉通道，分面，统计等。我们注意到每种概念都是一个范畴，它是可以扩展的。如果我们能在理解自己的数据的基础上，善用G2的概念，你就可以组合出无穷多种图表，总有一种适合你。

如有建议，请联系我们

欢迎各位使用https://g2.alipay.com。

如果有好的建议，请及时联系我们（蚂蚁金服——体验技术部——数据图形组）。反馈地址https://github.com/antvis/feedback/issues/new

同时我们也发布了一套专业的数据可视化规范，欢迎查看https://antv.alipay.com。

不应该用 padding 做垂直居中。

height: 40px;
- padding: 8px 26px 10px;
+ padding: 0 26px;
+ line-height: 40px;

刚试了下g2 g6 l7 g2plot的都不行

在节点和连接线的文本不能编辑，最好在框架内置提供，并且可以扩展文本位置，文本样式等。

https://antvis.github.io/zh

Firefox 下长这样。

1. 问题描述：官方文档使用了markdown语法来编写，但是在真实的页面上结果显示markdown语法而不是相应的HTML，例如使用加粗的markdown语法结果页面显示“**”等符号
2. 样例链接：https://antv.antgroup.com/specification/module/title-note
3. 截图效果：

• @afc163 基础设施搭建 + 所有网站迁移，会给各个仓库提 PR
• 框架各自的负责人：内容填充 + 文档迁移 + 国际化 + 提需求

G2 2.2.0,

『微小，但是美好的改变。』

一、丰富可视化交互形式

选择: 图形的单选、多选以及框选；

筛选：新添图例单选模式、连续图例筛选、混合图表图例筛选以及数据范围选择条；

高亮：支持图例鼠标 hover 高亮。

​

二、丰富可视化表现形式

支持弧长链接图、和弦图以及桑基图 的绘制。

详见 更新日志。

说明： 2.2.0 版本完全向下兼容，请放心升级使用。

G2 为你而来
感谢所有关注和使用 G2 的朋友们！~

G2 官网： https://g2.alipay.com/

一张图实现柱状图在x轴上方与下方并在上面将二者的差距用面积图实现

X6 | XFlow的链接失效了，这里点进去，抱歉，您访问的页面不存在!

https://g2.alipay.com

概述

G2作为一款技术产品，自诞生以来，服务于广大的Web工程师群体和一部分数据分析师。一直来，G2 因其易用的语法和扎实的可视化理论基础，广受使用者好评。G2 1.x 的可视化能力已经非常强大，使用者已经能够在掌握图形语法的基础上结合自己对数据的理解，从而绘制出各种各样的可视化图表。然而，随着DT时代的更加深化，随着G2的发展，我们还是遇到了各种各样的，以往G2无法满足的可视化需求。经总结发现，大体上有以下几点：

1. 数据导向，同一张图表中，绘制异构数据图形的需求
2. 设计导向，对图形高度订制的需求
3. 移动端图表轻量化的需求

经过半个月设计和架构，我们重新梳理流程结构，我们提出了视图（View）和映射核心（Core）的概念，再经历了一个月紧锣密鼓的开发，本周我们迎来的G2 2.0的发布!
话不多说，下面咱具体看看G2.0的新特性 ~

新特性

一、多视图（View）

G2 2.0 我们进行了多View的支持。每一个View可以拥有自己的数据源。意味着2.0后我们可以在同一幅图表中，支持异构数据的图表绘制。详见链接

具体场景

场景一
用户甲：请问我有一组数据，画了一张区域图，还有一组数据是用来标定每个关键时刻的特殊值，怎么办？
1.0菌：关键时刻数据用chart.guide()吧
用户甲：可是guide好繁琐。。
1.0菌：。。。
2.0菌：你可以使用我的多View的功能！

场景二
用户乙：我这有一组数据画了地图气泡图，还有另外一组数据表示气泡之间的关系，怎么办？
1.0菌：这个臣妾做不到。。
用户乙：。。。
1.0菌：。。。。
2.0菌：你可以使用我的多View的功能！

二、自定义图形（Shape）

在G2 2.0 中我们拓展了自定义的Shape的机制，赋予那部分有 高订制需求的 、 有图形知识储备 的工程师有直接订制最终图形的能力。这也是G2在向 可编程可视化引擎 迈出的重要一步。详见链接

具体场景

场景一
某PD：我这有一份不同人物的得分数据，怎么可视化比较好？
1.0菌：可以用柱状图对比
某设计师：柱子直角不好看，改成圆角吧
1.0菌：暂时还没有内置圆角矩形的shape。。
某PD：不够形象，要把人物头像发上去
1.0菌：。。。。
2.0菌：你可以使用我的自定义Shape的功能！

场景二
某前端：你们原来的仪表盘好丑啊！
某设计：钟表能不能再假点呐！

1.0菌：无法反驳！
某前端：我想要这样xxo!!xxx@@oox&&（持续描述五分钟。。。）
1.0菌：把这些代码都加到我身上，我会膨胀死。。。
2.0菌：使用我的自定义Shape的功能！在G2外自由拓展，私人定制，满足你无限强迫的定制需求！

三、连线图形标记（Edge）

基于以上两个重点功能的实现，再加上连线的几何标记（Edge），我们终于能画出，简单的关系图了！（喜大普奔）

四、移动端的支持

G2-mobile为了移动端的开发宝宝已经操碎了心。
为了你们想要的简单而美好，作为强大G2的一个子集，我们忍痛割掉了各种洋气的功能；
为了让你们在G2和G2-mobile之间切换得心应手，我们把G2-mobile的接口和G2全部统一；
为了满足你们多样性的需要，我们开放了更多自定义接口。详见G2-mobile说明

更丰富、更用心的图表DEMO

PC Demo

详细见G2 Demo中心

Mobile Demo

详细见G2-Mobile Demo中心

升级指南

PC 端

新增

• 自定义 shape
• 多视图 View 功能，支持图表组合和异构数据的绘制
• 新增 edge 几何标记，用于支持关系图的绘制

移除

• chart.legendVisible() 废除，不再支持
• chart.legend('left|top|right|bottom') （即原先直接传入位置字符串来设定图例位置 ） 废除，不再支持
• 移除了部分 G2 默认提供的 shape:

Mobile 端

新增

• chart.guide() 方法：支持的辅助类型有：折线(line)、弧线(arc)、文字(text)和自定义(html)
• 新增的图形绘制属性：
  • fill
  • stroke
  • fontFamily
  • fontSize
  • fontWeight
  • fontVariant

注意事项

• 2.0 后我们推荐使用我们绘图库的原生属性（比如：fontSize），不建议使用旧的svg规范的熟悉（比图：'font-size'）。详情见G2-Graphic

开发成员想说的话

这次变动很大，我们又把自己颠覆了一次。这次也没啥变化，我们还是坚持数据出发、数据驱动。

联系方式

: https://github.com/antvis
💬 : https://github.com/antvis/feedback/issues/new
✉️ ：[email protected]

如题, 所有的网页都打不开, 怎么用??????

问题：graph.zh.md 中 2.1 小节附近的内容存在几处格式的问题

截图：