Closed wuchugit closed 5 years ago
viser-graph 更新到 ~0.1.10 版本
官网demo 是适用于 g6 2.2.0 版本的demo, onAfterchange 会重置 node 的 label 位置,请去除这段代码。node 的 label 、labelOffsetX 改由 node 属性传入,最新demo 如下:
import { Graph, Node, Edge, registerNode, registerEdge, Layouts, Util } from 'viser-graph-react';
import * as React from 'react';
const data = {
"name": "Modeling Methods",
"children": [
{
"name": "Classification",
"children": [
{
"name": "Logistic regression"
},
{
"name": "Linear discriminant analysis"
},
{
"name": "Rules"
},
{
"name": "Decision trees"
},
{
"name": "Naive Bayes"
},
{
"name": "K nearest neighbor"
},
{
"name": "Probabilistic neural network"
},
{
"name": "Support vector machine"
}
]
},
{
"name": "Consensus",
"children": [
{
"name": "Models diversity",
"children": [
{
"name": "Different initializations"
},
{
"name": "Different parameter choi9999999999999999999ces"
},
{
"name": "Different architectures"
},
{
"name": "Different modeling methods"
},
{
"name": "Different training sets"
},
{
"name": "Different feature sets"
}
]
},
{
"name": "Methods",
"children": [
{
"name": "Classifier selection"
},
{
"name": "Classifier fusion"
}
]
},
{
"name": "Common",
"children": [
{
"name": "Bagging"
},
{
"name": "Boosting"
},
{
"name": "AdaBoost"
}
]
}
]
},
{
"name": "Regression",
"children": [
{
"name": "Multiple linear regression"
},
{
"name": "Partial least squares"
},
{
"name": "Multi-layer feedforward neural network"
},
{
"name": "General regression neural network"
},
{
"name": "Support vector regression"
}
]
}
]
};
registerNode('treeNode', {
anchor: [[0, 0.5], [1, 0.5]]
});
registerEdge('smooth', {
getPath: function getPath(item) {
var points = item.getPoints();
var start = points[0];
var end = points[points.length - 1];
var hgap = Math.abs(end.x - start.x);
if (end.x > start.x) {
return [['M', start.x, start.y], ['C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y]];
}
return [['M', start.x, start.y], ['C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y]];
}
});
var layout = new Layouts.CompactBoxTree({
// direction: 'LR', // 方向(LR/RL/H/TB/BT/V)
getHGap: function getHGap() /* d */ {
// 横向间距
return 100;
},
getVGap: function getVGap() /* d */ {
// 竖向间距
return 10;
}
});
const graph = {
container: 'mount',
width: 500,
height: 500,
fitView: 'autoZoom',
fitViewPadding: true,
animate: true,
type: 'tree',
layout: layout,
data: {
roots: [data]
},
};
const node = {
shape: 'treeNode',
size: 8,
label: function label(model) {
if (model.children && model.children.length > 0) {
return {
text: model.name,
textAlign: 'right'
};
}
return {
text: model.name,
textAlign: 'left'
};
},
labelOffsetX: function labelOffsetX(model) {
if (model.children && model.children.length > 0) {
return -10;
}
return 10;
}
};
const edge = {
shape: 'smooth'
};
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Graph {...graph}>
<Node {...node} />
<Edge {...edge} />
</Graph>
</div>
);
}
}
两边的label文字没有留位置,本地是正常的,发到日常就会这样。参考文档,使用label里的属性都没有效果。以下代码业不能解决:
const node = { shape: 'treeNode', size: 8, //label: function (obj) { //obj.position = 'bottom' //return obj.name; //}, label: function (model) { if (model.children && model.children.length > 0) { return { text: model.name, textAlign: 'center' }; } return { text: model.name, textAlign: 'center' }; }, style: { // 关键形样式(优先级高于color) fill: 'red', stroke: 'green' } };
问题二:通过state渲染图次数多了,会报g6的index undefined错误。