UNPKG

@antv/g6

Version:

graph visualization frame work

1 lines 21.6 kB
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-e7d05c8e5cce22efae461c705bb372f7-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"最近答疑群里面有同学反馈说 G6 不支持 IE,官网上的 Demo 在 IE 上完全打不开,对于这样对问题,我们有考虑过怎么处理,最终没有选择内部处理,具体原因自行脑补。","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":86,"offset":86}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":86,"offset":86}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"下面针对@vue/cli、umi、create-react-app搭建的项目给出一些解决方案,","position":{"start":{"line":4,"column":1,"offset":88},"end":{"line":4,"column":48,"offset":135}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"务必确保在没有引入 G6 时你的项目可以正常运行在IE上, **我相信如果项目框架是你自己搭建的,那么 IE 兼容性问题对你来说完全不是问题,","position":{"start":{"line":4,"column":50,"offset":137},"end":{"line":4,"column":121,"offset":208}}}],"position":{"start":{"line":4,"column":48,"offset":135},"end":{"line":4,"column":123,"offset":210}}},{"type":"text","value":"更确切的说应该是依赖的兼容性问题怎么解决**。","position":{"start":{"line":4,"column":123,"offset":210},"end":{"line":4,"column":146,"offset":233}}}],"position":{"start":{"line":4,"column":1,"offset":88},"end":{"line":4,"column":146,"offset":233}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"类似如下错误。","position":{"start":{"line":6,"column":1,"offset":235},"end":{"line":6,"column":8,"offset":242}}},{"type":"raw","value":"<br />","position":{"start":{"line":6,"column":8,"offset":242},"end":{"line":6,"column":14,"offset":248}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572488463816-61bac7a7-9599-43b9-9871-84aa19c517f8.png#align=left&display=inline&height=462&name=9B7EDCB4-D317-4FB5-814D-68F58817ADD4.png&originHeight=462&originWidth=1974&search=&size=268517&status=done&width=1974","alt":"9B7EDCB4-D317-4FB5-814D-68F58817ADD4.png"},"children":[],"position":{"start":{"line":6,"column":14,"offset":248},"end":{"line":6,"column":319,"offset":553}}}],"position":{"start":{"line":6,"column":1,"offset":235},"end":{"line":6,"column":319,"offset":553}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"vuecli"},"children":[{"type":"element","tagName":"a","properties":{"href":"#vuecli","aria-label":"vuecli permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"vue/cli","position":{"start":{"line":8,"column":4,"offset":558},"end":{"line":8,"column":11,"offset":565}}}],"position":{"start":{"line":8,"column":1,"offset":555},"end":{"line":8,"column":11,"offset":565}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"本","position":{"start":{"line":10,"column":1,"offset":567},"end":{"line":10,"column":2,"offset":568}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/lxfu/vue-g6","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"案例","position":{"start":{"line":10,"column":3,"offset":569},"end":{"line":10,"column":5,"offset":571}}}],"position":{"start":{"line":10,"column":2,"offset":568},"end":{"line":10,"column":38,"offset":604}}},{"type":"text","value":"是基于@vue/cli(V: 4.0.5),如果你的版本是3.x的话可能写法上会有出入,@vue/cli怎么解决依赖兼容性问题呢?","position":{"start":{"line":10,"column":38,"offset":604},"end":{"line":10,"column":103,"offset":669}}},{"type":"raw","value":"<br />","position":{"start":{"line":10,"column":103,"offset":669},"end":{"line":10,"column":109,"offset":675}}},{"type":"text","value":"遇到问题首先想到的是官网,没错,先看看","position":{"start":{"line":10,"column":109,"offset":675},"end":{"line":10,"column":128,"offset":694}}},{"type":"element","tagName":"a","properties":{"href":"https://cli.vuejs.org/zh/guide/browser-compatibility.html#polyfill","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"官网","position":{"start":{"line":10,"column":129,"offset":695},"end":{"line":10,"column":131,"offset":697}}}],"position":{"start":{"line":10,"column":128,"offset":694},"end":{"line":10,"column":200,"offset":766}}},{"type":"text","value":"上有没有类似的教程,从官网上我们定位到浏览器兼容性,如下","position":{"start":{"line":10,"column":200,"offset":766},"end":{"line":10,"column":228,"offset":794}}}],"position":{"start":{"line":10,"column":1,"offset":567},"end":{"line":10,"column":228,"offset":794}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572487613256-21bd4477-3bf7-4f0e-a016-6cfc88694796.png#align=left&display=inline&height=1434&name=7AEAC95F-6626-476E-8C63-830852883FC6.png&originHeight=1434&originWidth=2620&search=&size=1281163&status=done&width=2620","alt":"7AEAC95F-6626-476E-8C63-830852883FC6.png"},"children":[],"position":{"start":{"line":12,"column":1,"offset":796},"end":{"line":12,"column":309,"offset":1104}}}],"position":{"start":{"line":12,"column":1,"offset":796},"end":{"line":12,"column":309,"offset":1104}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"从文章中我们貌似已经找到了问题的答案,我们需要新建vue.config.js文件(和package.json同一目录),在里面添加transpileDependencies选项,","position":{"start":{"line":14,"column":1,"offset":1106},"end":{"line":14,"column":90,"offset":1195}}}],"position":{"start":{"line":14,"column":1,"offset":1106},"end":{"line":14,"column":90,"offset":1195}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572487802971-7c772bc2-a319-4845-a28f-07617c9d9165.png#align=left&display=inline&height=642&name=6CDAA5DF-2206-4749-B5BD-C8EB3D13527D.png&originHeight=642&originWidth=1950&search=&size=289455&status=done&width=1950","alt":"6CDAA5DF-2206-4749-B5BD-C8EB3D13527D.png"},"children":[],"position":{"start":{"line":16,"column":1,"offset":1197},"end":{"line":16,"column":306,"offset":1502}}}],"position":{"start":{"line":16,"column":1,"offset":1197},"end":{"line":16,"column":306,"offset":1502}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"该选项默认值是[],说明会忽略掉所有掉node","position":{"start":{"line":18,"column":1,"offset":1504},"end":{"line":18,"column":24,"offset":1527}}},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"modules文件,不会对node","position":{"start":{"line":18,"column":25,"offset":1528},"end":{"line":18,"column":42,"offset":1545}}}],"position":{"start":{"line":18,"column":24,"offset":1527},"end":{"line":18,"column":43,"offset":1546}}},{"type":"text","value":"modules里面对文件做Babel,我们需要做的就是把我们希望Babel的文件加入即可,代码如下,需要注意的是我们加入的依赖","position":{"start":{"line":18,"column":43,"offset":1546},"end":{"line":18,"column":106,"offset":1609}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"不需要包含node_modules,用包名(","position":{"start":{"line":18,"column":108,"offset":1611},"end":{"line":18,"column":130,"offset":1633}}}],"position":{"start":{"line":18,"column":106,"offset":1609},"end":{"line":18,"column":132,"offset":1635}}},{"type":"text","value":"@antv/g6","position":{"start":{"line":18,"column":132,"offset":1635},"end":{"line":18,"column":140,"offset":1643}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":")即可","position":{"start":{"line":18,"column":142,"offset":1645},"end":{"line":18,"column":145,"offset":1648}}}],"position":{"start":{"line":18,"column":140,"offset":1643},"end":{"line":18,"column":147,"offset":1650}}},{"type":"text","value":",因为@vue/cli会自动添加前缀node","position":{"start":{"line":18,"column":147,"offset":1650},"end":{"line":18,"column":169,"offset":1672}}},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"modules。 还需要注意 @antv/g6必须和package.json里面的一致,安装依赖的时候首选npm,如果你用yarn、cnpm等安装,需要确保node","position":{"start":{"line":18,"column":170,"offset":1673},"end":{"line":18,"column":252,"offset":1755}}}],"position":{"start":{"line":18,"column":169,"offset":1672},"end":{"line":18,"column":253,"offset":1756}}},{"type":"text","value":"modules里面的包名没有被更改。","position":{"start":{"line":18,"column":253,"offset":1756},"end":{"line":18,"column":271,"offset":1774}}}],"position":{"start":{"line":18,"column":1,"offset":1504},"end":{"line":18,"column":271,"offset":1774}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n transpileDependencies<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'@antv/g6'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":20,"column":1,"offset":1776},"end":{"line":24,"column":4,"offset":1853}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"好了,我们打开IE11看看结果吧。","position":{"start":{"line":26,"column":1,"offset":1855},"end":{"line":26,"column":18,"offset":1872}}},{"type":"raw","value":"<br />","position":{"start":{"line":26,"column":18,"offset":1872},"end":{"line":26,"column":24,"offset":1878}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572488515498-453227ad-1602-4b33-a39b-8fe37ee561ad.png#align=left&display=inline&height=612&name=DF84211F-8B5E-4100-9048-86BB445DF28E.png&originHeight=612&originWidth=2192&search=&size=552053&status=done&width=2192","alt":"DF84211F-8B5E-4100-9048-86BB445DF28E.png"},"children":[],"position":{"start":{"line":26,"column":24,"offset":1878},"end":{"line":26,"column":329,"offset":2183}}}],"position":{"start":{"line":26,"column":1,"offset":1855},"end":{"line":26,"column":329,"offset":2183}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"最开始的那个报错解决了,但咋出现了新问题呢,别急,先用chrome浏览器看看,发现问题是一样的,添加完transpileDependencies兼容性问题是没有了,但出了个新错误。再次查看官网,并没有相关文章,那就直接移步issue吧,经过一番查找,我们找到如下解决方案,在babel.config.js里面添加上sourceType: \"unambiguous\",具体含有可以官网查阅。","position":{"start":{"line":28,"column":1,"offset":2185},"end":{"line":28,"column":195,"offset":2379}}}],"position":{"start":{"line":28,"column":1,"offset":2185},"end":{"line":28,"column":195,"offset":2379}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n sourceType<span class=\"token punctuation\">:</span> <span class=\"token string\">'unambiguous'</span><span class=\"token punctuation\">,</span>\n presets<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'@vue/cli-plugin-babel/preset'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":30,"column":1,"offset":2381},"end":{"line":35,"column":4,"offset":2493}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"再次编译,","position":{"start":{"line":37,"column":1,"offset":2495},"end":{"line":37,"column":6,"offset":2500}}}],"position":{"start":{"line":37,"column":1,"offset":2495},"end":{"line":37,"column":6,"offset":2500}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572488965455-b993c651-c934-4db9-bef7-ddb3430b52be.png#align=left&display=inline&height=920&name=F4680A19-5EB7-43DE-97C0-E86CAB824973.png&originHeight=920&originWidth=2874&search=&size=419213&status=done&width=2874","alt":"F4680A19-5EB7-43DE-97C0-E86CAB824973.png"},"children":[],"position":{"start":{"line":39,"column":1,"offset":2502},"end":{"line":39,"column":306,"offset":2807}}}],"position":{"start":{"line":39,"column":1,"offset":2502},"end":{"line":39,"column":306,"offset":2807}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"到此,完美解决问题。","position":{"start":{"line":41,"column":1,"offset":2809},"end":{"line":41,"column":11,"offset":2819}}}],"position":{"start":{"line":41,"column":1,"offset":2809},"end":{"line":41,"column":11,"offset":2819}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"create-react-app"},"children":[{"type":"element","tagName":"a","properties":{"href":"#create-react-app","aria-label":"create react app permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"create-react-app","position":{"start":{"line":44,"column":4,"offset":2825},"end":{"line":44,"column":20,"offset":2841}}}],"position":{"start":{"line":44,"column":1,"offset":2822},"end":{"line":44,"column":20,"offset":2841}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如果你使用create-react-app(V: 3.0.0)初始化项目,那么恭喜你,create-react-app已经内置了依赖兼容性的处理方案,你只需要配置项目自身的兼容性问题即可,配置有多种方式,可","position":{"start":{"line":46,"column":1,"offset":2843},"end":{"line":46,"column":104,"offset":2946}}},{"type":"element","tagName":"a","properties":{"href":"https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"参考","position":{"start":{"line":46,"column":105,"offset":2947},"end":{"line":46,"column":107,"offset":2949}}}],"position":{"start":{"line":46,"column":104,"offset":2946},"end":{"line":46,"column":203,"offset":3045}}},{"type":"text","value":"。","position":{"start":{"line":46,"column":203,"offset":3045},"end":{"line":46,"column":204,"offset":3046}}},{"type":"raw","value":"<br />","position":{"start":{"line":46,"column":204,"offset":3046},"end":{"line":46,"column":210,"offset":3052}}},{"type":"text","value":"eg:","position":{"start":{"line":46,"column":210,"offset":3052},"end":{"line":46,"column":213,"offset":3055}}},{"type":"raw","value":"<br />","position":{"start":{"line":46,"column":213,"offset":3055},"end":{"line":46,"column":219,"offset":3061}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572489484918-5ee52fed-3ca9-434d-b7f9-ec153fdf6c21.png#align=left&display=inline&height=968&name=448C42C7-C55A-452E-847D-DC1C1F9955B1.png&originHeight=968&originWidth=1696&search=&size=640894&status=done&width=1696","alt":"448C42C7-C55A-452E-847D-DC1C1F9955B1.png"},"children":[],"position":{"start":{"line":46,"column":219,"offset":3061},"end":{"line":46,"column":524,"offset":3366}}}],"position":{"start":{"line":46,"column":1,"offset":2843},"end":{"line":46,"column":524,"offset":3366}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"当然,也许你想看看内部是怎么处理的,那就执行npm run eject 或 yarn run eject吧,这样就能暴露create-react-app的内置配置了,这个操作是不可逆的。 内置配置如下","position":{"start":{"line":48,"column":1,"offset":3368},"end":{"line":48,"column":101,"offset":3468}}},{"type":"raw","value":"<br />","position":{"start":{"line":48,"column":101,"offset":3468},"end":{"line":48,"column":107,"offset":3474}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/278352/1572491425327-f74942f3-fbbe-4982-8d35-f1f0d31a0f21.png#align=left&display=inline&height=1222&name=EA6D3C17-BD59-45CA-9B86-F581CCF278A3.png&originHeight=1222&originWidth=2002&search=&size=1155793&status=done&width=2002","alt":"EA6D3C17-BD59-45CA-9B86-F581CCF278A3.png"},"children":[],"position":{"start":{"line":48,"column":107,"offset":3474},"end":{"line":48,"column":415,"offset":3782}}}],"position":{"start":{"line":48,"column":1,"offset":3368},"end":{"line":48,"column":415,"offset":3782}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"umi"},"children":[{"type":"element","tagName":"a","properties":{"href":"#umi","aria-label":"umi permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"umi","position":{"start":{"line":51,"column":4,"offset":3788},"end":{"line":51,"column":7,"offset":3791}}}],"position":{"start":{"line":51,"column":1,"offset":3785},"end":{"line":51,"column":7,"offset":3791}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如果你使用的是umi,再次恭喜你,umi不仅内置了依赖兼容性方案,而且配置简单,如果有任何问题,你可以在答疑群里面@云谦大佬。","position":{"start":{"line":53,"column":1,"offset":3793},"end":{"line":53,"column":64,"offset":3856}}}],"position":{"start":{"line":53,"column":1,"offset":3793},"end":{"line":53,"column":64,"offset":3856}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">{</span>\n browserslist<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'> 1%'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'last 2 versions'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":55,"column":1,"offset":3858},"end":{"line":59,"column":4,"offset":3940}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":60,"column":1,"offset":3941}}}}