Преобразование знаний и контента в графики для индуктивного вывода становится все более и более популярным. Использование технологии визуализации графиков может помочь нам лучше организовать большое количество информации, с которой мы сталкиваемся ежедневно. Мобильный телефон, как устройство с самой высокой пропускной способностью, естественно, является отличным выходным носителем для визуализации графика.
Существующие технологии визуализации графов на мобильной стороне включают F2 и F6 в Antv. F2 в основном фокусируется на статистических графиках для анализа данных, а F6 фокусируется на графиках, связанных с различными сценариями. Оба имеют свою направленность. F6 — это простой, удобный в использовании и полный мобильный механизм визуализации графов.На основе широких возможностей настройки он предоставляет ряд элегантных и простых в использовании решений для визуализации графов. Это может помочь разработчикам создавать свои собственные приложения для визуализации графиков, анализа графиков или редактора графиков. Если вы хотите вывести содержимое в виде блок-схемы, карты знаний, карты разума и т. д. и надеетесь легко управлять картой, то рекомендуется попробовать F6.
Добро пожаловать, чтобы отметить и отправить проблему
основная концепция
Для карты классификации разные углы имеют разную классификацию. Затем мы, на карте, классифицированные с точки зрения особенностей, можно разделить на следующие категории
Существует множество типов графиков, но все они имеют общую черту, то есть состоят из несколькихузела такжесторонасостоит из. Узлы представляют объекты, которые мы рисуем, а ребра представляют отношения между объектами. Например, вот такую картинку мы вам сегодня нарисуемДиаграмма кольцевой дуги. Кружок с английским языком на рисунке — это узел, представляющий определенную сущность. Дуги, соединяющие разные окружности, являются ребрами, представляющими связь между объектами.
Так называемый кольцевой дуговой граф, кольцо, относится к расположению узлов вокруг одного и того же центра. Дуга означает, что ребро между узлом и узлом имеет форму дуги.
Как нарисовать визуализацию с помощью F6
Итак, как мы должны использовать F6, чтобы нарисовать этот сложно выглядящий график дуги окружности? Первое, о чем нужно подумать, это то, что мы хотим предоставить данные F6. Нам нужно сообщить F6, какие узлы нам нужно нарисовать, какие ребра, имена этих узлов и какие узлы имеют отношения. В частности, на уровне кода нам нужно предоставить данные со следующей структурой
{
nodes:[],
edges:[]
}
- nodes — это массив объектов, каждый объект в котором представляет узел
- ребра — это массив объектов, каждый объект в котором представляет ребро
Чтобы быть более конкретным, следующий фрагмент данных может представлять два узла «море» и «вода» и ребро, соединяющее эти два узла.
{
"nodes": [
{
"id":"water"
},
{
"id":"sea"
}
],
"edges": [
{
"source":"water",
"target":"sea"
}
]
}
После того, как у нас есть данные, нам нужно вызвать F6 для рисования. В это время нам нужно импортировать данные, вызвать интерфейс F6 и отправить данные на F6, чтобы он помог нам нарисовать нужную картинку. С точки зрения уровня кода нам нужно сделать в файле js следующие три вещи:
- Новый экземпляр: новый F6.Graph() для создания нового графа экземпляра графа.
- Входящие данные: graph.data() входящие данные для рисования
- Рисование: graph.render() для рисования.
Как сказать, не очень просто! На самом деле основная часть — это первый шаг, создание нового экземпляра. На этом шаге вам нужно передать некоторые параметры, такие как центрирование графика, пользовательские точки, пользовательские ребра, размер всего графика, используемые плагины, макет и т. д. ~, дайте каштан 🌰
this.graph = new F6.Graph({
context: this.context,
renderer: this.renderer,
width,
height,
pixelRatio,
fitView,
modes: {
default：['drag-canvas', 'drag-node']
}
defaultNode:{},
defaultEdge:{},
layout:{},
plugin:[]
})
Выше приведен пример простого примера нового графа Параметров кажется слишком много, но каждый из них очень прост для понимания:
- ширина и высота - установить ширину и высоту рисуемого изображения
- Pixelratio масштабируется
- fitView, подходит к экрану
- Режим перетаскивания графика режимов, например, необязательное перетаскивание холста, перетаскивание узлов
- defaultnode: стиль узла по умолчанию
- defaultEdge: стиль края по умолчанию
- layout, установить макет всего графика
- плагин, используйте расширенные функции плагина, такие как временная шкала, увеличительное стекло «рыбий глаз» и другие расширенные функции
После создания нового экземпляра мы передаем данные, которые мы написали ранее, в этот экземпляр. Затем вызовите метод рендеринга экземпляра, и мы сможем нарисовать желаемую картинку!
Некоторые из основных шагов использования F6 для рисования изображения были представлены ранее. Можно сказать, что увидев здесь, вы освоили процесс рисования F6. Затем мы войдем в настоящую боевую ссылку и реализуем флаг, который мы установили ранее: график дуги окружности!
Используйте F6 на апплете Alipay
Возьмем в качестве примера апплет Alipay.Во-первых, мы создаем новое приложение апплета Alipay в инструменте разработчика апплета Alipay:Выберите апплет Alipay
Выберите самый простой пустой шаблон и дайте проекту строгое имя, желательно на английском языке.
После завершения мы можем получить пустой шаблон апплета Alipay. Далее идем в консоль и с помощью npm устанавливаем два необходимых пакета:@antv/f6а также@antv/f6-alipay
npm initnpm install @antv/f6npm install @antv/f6-alipay
После установки вы можете начать писать код~
Мы создаем новую папку roundArcDiagram/ под страницами/. И создайте несколько необходимых файлов. Структура файла следующая:
pages/
circularArcDiagram/
index.js
index.axml
index.acss
index.json
data.js
Файлы, необходимые для построения графика, — это 5 файлов, указанных выше. Правильно, на этот раз мы собираемся нарисовать граф дуги окружности, и окончательный каталог реализации выглядит следующим образом:
index.axml
Давайте сначала посмотрим на index.axml. Рисунок F6 рисуется на канавах, нам нужно установить ширину, высоту, коэффициент масштабирования, функцию обратного вызова и другую базовую информацию о канвасе.
<f6-canvas
width="{{width}}"
height="{{height}}"
forceMini="{{forceMini}}"
pixelRatio="{{pixelRatio}}"
onTouchEvent="handleTouch"
onInit="handleInit"
></f6-canvas>
index.css
Затем есть ничем не примечательный CSS, который в основном управляет цветом фона страницы и отступом нарисованного изображения холста.
page {
background-color: #f7f7f7;
border: 1px solid rgba(0,0,0,0);
box-sizing: border-box;
}
.page-section-demo {
padding: 32rpx;
}
index.json
index.json: это в основном для управления используемыми компонентами, здесь представлено то, что мы используем в axml.
{
"defaultTitle": "环形弧线图",
"usingComponents": {
"f6-canvas": "@antv/f6-alipay/es/container/container"
}
}
index.js
Последним является файл index.js, который управляет основной логикой.Поскольку файл js является основной частью нашего использования F6, давайте немного поговорим Первый — это то, что мы упоминали ранее, используя трилогию F6, new, data, render.
//new,新建F6实例
this.graph = new F6.Graph({
context: this.ctx,
renderer: this.renderer,
width,
height,
pixelRatio,
linkCenter: true,
fitView: true,
modes: {
default: [
{
type: 'edge-tooltip',
formatText: function formatText(model) {
const text = `source: ${model.sourceName}<br/> target: ${model.targetName}`;
return text;
},
},
],
},
defaultNode: {
style: {
opacity: 0.8,
lineWidth: 1,
stroke: '#999',
},
},
defaultEdge: {
size: 1,
color: '#e2e2e2',
style: {
opacity: 0.6,
lineAppendWidth: 3,
},
},
});
//data，处理数据
this.graph.data(data)
//render，绘图
this.render()
Выше приведена основная структура, полный код выглядит следующим образом:
import F6 from '@antv/f6';
import data from './data';
import mds from '@antv/f6/dist/extends/layout/mdsLayout';
/**
* 环形弧线图
*/
Page({
canvas: null,
ctx: null,
renderer: '', // mini、mini-native等，F6需要，标记环境
isCanvasInit: false, // canvas是否准备好了
graph: null,
data: {
width: 375,
height: 600,
pixelRatio: 2,
forceMini: false,
},
onLoad() {
// 注册布局
F6.registerLayout('mds', mds);
// 同步获取window的宽高
const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();
this.setData({
width: windowWidth,
height: windowHeight,
pixelRatio,
});
},
/**
* 初始化cnavas回调，缓存获得的context
* @param {*} ctx 绘图context
* @param {*} rect 宽高信息
* @param {*} canvas canvas对象，在render为mini时为null
* @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native
*/
handleInit(ctx, rect, canvas, renderer) {
this.isCanvasInit = true;
this.ctx = ctx;
this.renderer = renderer;
this.canvas = canvas;
this.updateChart();
},
/**
* canvas派发的事件，转派给graph实例
*/
handleTouch(e) {
this.graph && this.graph.emitEvent(e);
},
updateChart() {
const { width, height, pixelRatio } = this.data;
const colors = [
'rgb(91, 143, 249)',
'rgb(90, 216, 166)',
'rgb(93, 112, 146)',
'rgb(246, 189, 22)',
'rgb(232, 104, 74)',
'rgb(109, 200, 236)',
'rgb(146, 112, 202)',
'rgb(255, 157, 77)',
'rgb(38, 154, 153)',
'rgb(227, 137, 163)',
];
// 创建F6实例
this.graph = new F6.Graph({
context: this.ctx,
renderer: this.renderer,
width,
height,
pixelRatio,
linkCenter: true,
fitView: true,
modes: {
default: [
{
type: 'edge-tooltip',
formatText: function formatText(model) {
const text = `source: ${model.sourceName}<br/> target: ${model.targetName}`;
return text;
},
},
],
},
defaultNode: { //默认节点样式
style: {
opacity: 0.8,
lineWidth: 1,
stroke: '#999',
},
},
defaultEdge: { //默认边样式
size: 1,
color: '#e2e2e2',
style: {
opacity: 0.6,
lineAppendWidth: 3,
},
},
});
// 处理数据
function scaleNodeProp(nodes, propName, refPropName, dataRange, outRange) {
const outLength = outRange[1] - outRange[0];
const dataLength = dataRange[1] - dataRange[0];
nodes.forEach(function(n) {
n[propName] = ((n[refPropName] - dataRange[0]) * outLength) / dataLength + outRange[0];
});
}
const origin = [width / 2, height / 2];
const radius = width < height ? width / 3 : height / 3;
const { edges } = data;
const { nodes } = data;
const nodeMap = new Map();
const clusterMap = new Map();
let clusterId = 0;
const n = nodes.length;
const angleSep = (Math.PI * 2) / n;
nodes.forEach(function(node, i) {
const angle = i * angleSep;
node.x = radius * Math.cos(angle) + origin[0];
node.y = radius * Math.sin(angle) + origin[1];
node.angle = angle;
nodeMap.set(node.id, node);
// cluster
if (node.cluster && clusterMap.get(node.cluster) === undefined) {
clusterMap.set(node.cluster, clusterId);
clusterId++;
}
const id = clusterMap.get(node.cluster);
if (node.style) {
node.style.fill = colors[id % colors.length];
} else {
node.style = {
fill: colors[id % colors.length],
};
}
// label
node.label = node.name;
node.labelCfg = {
position: 'center',
style: {
rotate: angle,
rotateCenter: 'lefttop',
textAlign: 'start',
},
};
});
edges.forEach((edge) => {
edge.type = 'quadratic';
const source = nodeMap.get(edge.source);
const target = nodeMap.get(edge.target);
edge.controlPoints = [
{
x: origin[0],
y: origin[1],
},
];
edge.color = source.style.fill;
edge.sourceName = source.name;
edge.targetName = target.name;
});
// map the value to node size
let maxValue = -9999;
let minValue = 9999;
nodes.forEach(function(k) {
if (maxValue < k.value) maxValue = k.value;
if (minValue > k.value) minValue = k.value;
});
const sizeRange = [3, 30];
const sizeDataRange = [minValue, maxValue];
scaleNodeProp(nodes, 'size', 'value', sizeDataRange, sizeRange);
this.graph.data(data);
this.graph.render();
this.graph.fitView();
},
});
data.json
Наконец, данные, используемые в этом графике, следующие:
export default {
nodes: [
{
id: '0',
name: 'analytics.cluster',
cluster: 'analytics',
value: 21,
},
{
id: '1',
name: 'analytics.graph',
cluster: 'analytics',
value: 34,
},
{
id: '2',
name: 'analytics.optimization',
cluster: 'analytics',
value: 8,
},
{
id: '3',
name: 'animate',
cluster: 'animate',
value: 40,
},
{
id: '4',
name: 'animate.interpolate',
cluster: 'animate',
value: 18,
},
{
id: '5',
name: 'data.converters',
cluster: 'data',
value: 25,
},
{
id: '6',
name: 'data',
cluster: 'data',
value: 10,
},
{
id: '7',
name: 'display',
cluster: 'display',
value: 4,
},
{
id: '8',
name: 'flex',
cluster: 'flex',
value: 6,
},
{
id: '9',
name: 'physics',
cluster: 'physics',
value: 22,
},
{
id: '10',
name: 'query',
cluster: 'query',
value: 67,
},
{
id: '11',
name: 'query.methods',
cluster: 'query',
value: 71,
},
{
id: '12',
name: 'scale',
cluster: 'scale',
value: 33,
},
{
id: '13',
name: 'util',
cluster: 'util',
value: 23,
},
{
id: '14',
name: 'util.heap',
cluster: 'util',
value: 2,
},
{
id: '15',
cluster: 'util',
name: 'util.math',
value: 2,
},
{
id: '16',
name: 'util.palette',
cluster: 'util',
value: 5,
},
{
id: '17',
name: 'vis.axis',
cluster: 'vis',
value: 24,
},
{
id: '18',
name: 'vis.controls',
cluster: 'vis',
value: 28,
},
{
id: '19',
name: 'vis.data',
cluster: 'vis',
value: 70,
},
{
id: '20',
name: 'vis.data.render',
cluster: 'vis',
value: 11,
},
{
id: '21',
name: 'vis.events',
cluster: 'vis',
value: 8,
},
{
id: '22',
name: 'vis.legend',
cluster: 'vis',
value: 27,
},
{
id: '23',
name: 'vis.operator.distortion',
cluster: 'vis',
value: 9,
},
{
id: '24',
name: 'vis.operator.encoder',
cluster: 'vis',
value: 30,
},
{
id: '25',
name: 'vis.operator.filter',
cluster: 'vis',
value: 17,
},
{
id: '26',
name: 'vis.operator',
cluster: 'vis',
value: 27,
},
{
id: '27',
name: 'vis.operator.label',
cluster: 'vis',
value: 18,
},
{
id: '28',
name: 'vis.operator.layout',
cluster: 'vis',
value: 91,
},
{
id: '29',
name: 'vis',
cluster: 'vis',
value: 13,
},
],
edges: [
{
source: '10',
target: '10',
sourceWeight: 61,
targetWeight: 61,
},
{
source: '11',
target: '11',
sourceWeight: 39,
targetWeight: 39,
},
{
source: '3',
target: '3',
sourceWeight: 30,
targetWeight: 30,
},
{
source: '19',
target: '19',
sourceWeight: 26,
targetWeight: 26,
},
{
source: '13',
target: '13',
sourceWeight: 23,
targetWeight: 23,
},
{
source: '9',
target: '9',
sourceWeight: 22,
targetWeight: 22,
},
{
source: '12',
target: '12',
sourceWeight: 19,
targetWeight: 19,
},
{
source: '28',
target: '19',
sourceWeight: 34,
targetWeight: 0,
},
{
source: '4',
target: '4',
sourceWeight: 16,
targetWeight: 16,
},
{
source: '11',
target: '10',
sourceWeight: 32,
targetWeight: 0,
},
{
source: '28',
target: '28',
sourceWeight: 14,
targetWeight: 14,
},
{
source: '18',
target: '18',
sourceWeight: 12,
targetWeight: 12,
},
{
source: '26',
target: '26',
sourceWeight: 11,
targetWeight: 11,
},
{
source: '28',
target: '13',
sourceWeight: 20,
targetWeight: 0,
},
{
source: '5',
target: '6',
sourceWeight: 17,
targetWeight: 2,
},
{
source: '19',
target: '13',
sourceWeight: 17,
targetWeight: 0,
},
{
source: '17',
target: '17',
sourceWeight: 7,
targetWeight: 7,
},
{
source: '6',
target: '6',
sourceWeight: 7,
targetWeight: 7,
},
{
source: '12',
target: '13',
sourceWeight: 14,
targetWeight: 0,
},
{
source: '1',
target: '19',
sourceWeight: 14,
targetWeight: 0,
},
{
source: '5',
target: '5',
sourceWeight: 7,
targetWeight: 7,
},
{
source: '21',
target: '19',
sourceWeight: 6,
targetWeight: 4,
},
{
source: '25',
target: '19',
sourceWeight: 10,
targetWeight: 0,
},
{
source: '0',
target: '0',
sourceWeight: 5,
targetWeight: 5,
},
{
source: '3',
target: '13',
sourceWeight: 9,
targetWeight: 0,
},
{
source: '20',
target: '19',
sourceWeight: 5,
targetWeight: 4,
},
{
source: '19',
target: '12',
sourceWeight: 9,
targetWeight: 0,
},
{
source: '0',
target: '19',
sourceWeight: 8,
targetWeight: 0,
},
{
source: '24',
target: '19',
sourceWeight: 8,
targetWeight: 0,
},
{
source: '22',
target: '22',
sourceWeight: 4,
targetWeight: 4,
},
{
source: '24',
target: '24',
sourceWeight: 4,
targetWeight: 4,
},
{
source: '26',
target: '3',
sourceWeight: 7,
targetWeight: 0,
},
{
source: '24',
target: '16',
sourceWeight: 7,
targetWeight: 0,
},
{
source: '16',
target: '16',
sourceWeight: 3,
targetWeight: 3,
},
{
source: '10',
target: '13',
sourceWeight: 6,
targetWeight: 0,
},
{
source: '7',
target: '7',
sourceWeight: 3,
targetWeight: 3,
},
{
source: '22',
target: '13',
sourceWeight: 6,
targetWeight: 0,
},
{
source: '20',
target: '20',
sourceWeight: 3,
targetWeight: 3,
},
{
source: '1',
target: '26',
sourceWeight: 6,
targetWeight: 0,
},
{
source: '27',
target: '19',
sourceWeight: 6,
targetWeight: 0,
},
{
source: '28',
target: '12',
sourceWeight: 6,
targetWeight: 0,
},
{
source: '22',
target: '7',
sourceWeight: 6,
targetWeight: 0,
},
{
source: '28',
target: '3',
sourceWeight: 6,
targetWeight: 0,
},
{
source: '17',
target: '7',
sourceWeight: 5,
targetWeight: 0,
},
{
source: '26',
target: '13',
sourceWeight: 5,
targetWeight: 0,
},
{
source: '27',
target: '13',
sourceWeight: 5,
targetWeight: 0,
},
{
source: '1',
target: '13',
sourceWeight: 5,
targetWeight: 0,
},
{
source: '1',
target: '3',
sourceWeight: 5,
targetWeight: 0,
},
{
source: '26',
target: '29',
sourceWeight: 3,
targetWeight: 2,
},
{
source: '22',
target: '16',
sourceWeight: 5,
targetWeight: 0,
},
{
source: '18',
target: '21',
sourceWeight: 4,
targetWeight: 0,
},
{
source: '22',
target: '12',
sourceWeight: 4,
targetWeight: 0,
},
{
source: '23',
target: '23',
sourceWeight: 2,
targetWeight: 2,
},
{
source: '17',
target: '29',
sourceWeight: 2,
targetWeight: 2,
},
{
source: '28',
target: '17',
sourceWeight: 4,
targetWeight: 0,
},
{
source: '15',
target: '15',
sourceWeight: 2,
targetWeight: 2,
},
{
source: '17',
target: '12',
sourceWeight: 4,
targetWeight: 0,
},
{
source: '27',
target: '27',
sourceWeight: 2,
targetWeight: 2,
},
{
source: '14',
target: '14',
sourceWeight: 2,
targetWeight: 2,
},
{
source: '18',
target: '29',
sourceWeight: 3,
targetWeight: 1,
},
{
source: '25',
target: '26',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '28',
target: '9',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '27',
target: '7',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '24',
target: '12',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '17',
target: '13',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '18',
target: '13',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '20',
target: '13',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '0',
target: '13',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '24',
target: '13',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '19',
target: '6',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '29',
target: '3',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '25',
target: '3',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '24',
target: '3',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '17',
target: '3',
sourceWeight: 3,
targetWeight: 0,
},
{
source: '0',
target: '15',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '28',
target: '26',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '24',
target: '26',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '16',
target: '13',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '1',
target: '14',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '29',
target: '21',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '21',
target: '21',
sourceWeight: 1,
targetWeight: 1,
},
{
source: '29',
target: '19',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '19',
target: '14',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '4',
target: '13',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '19',
target: '15',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '8',
target: '17',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '2',
target: '13',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '18',
target: '19',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '1',
target: '1',
sourceWeight: 1,
targetWeight: 1,
},
{
source: '23',
target: '17',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '23',
target: '19',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '0',
target: '3',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '18',
target: '3',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '19',
target: '3',
sourceWeight: 2,
targetWeight: 0,
},
{
source: '29',
target: '13',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '8',
target: '29',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '21',
target: '3',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '22',
target: '3',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '3',
target: '4',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '2',
target: '29',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '22',
target: '19',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '23',
target: '3',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '2',
target: '26',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '2',
target: '19',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '26',
target: '19',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '2',
target: '17',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '27',
target: '3',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '5',
target: '13',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '2',
target: '12',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '28',
target: '20',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '18',
target: '28',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '23',
target: '21',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '8',
target: '6',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '2',
target: '3',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '1',
target: '29',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '23',
target: '28',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '6',
target: '13',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '25',
target: '13',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '8',
target: '7',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '7',
target: '13',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '27',
target: '26',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '18',
target: '7',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '0',
target: '26',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '19',
target: '7',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '8',
target: '19',
sourceWeight: 1,
targetWeight: 0,
},
{
source: '28',
target: '29',
sourceWeight: 1,
targetWeight: 0,
},
],
};
Апплет WeChat
Код апплета WeChat и апплета Alipay в основном одинаков. Чтобы использовать F6 для рисования изображений в апплете WeChat, вы можете обратиться к некоторым демонстрациям, которые мы написали:GitHub.com/ant vis/F6/he…
Если вас интересуют более насыщенные изображения, вы можете посетить официальный сайт:f6.antv.vision/или гитхаб:github.com/antvis/F6
Добро пожаловать к нам
Добро пожаловать, чтобы отметить и отправить проблему
Если вас интересует древовидная диаграмма или визуализация диаграммы, вы можете добавить мой WeChatopenwayneВойдите в нашу группу WeChat.