viserjs / viser

viser is a toolkit fit for data vis engineer. https://viserjs.gitee.io/
https://viserjs.github.io
MIT License
1.61k stars 123 forks source link

急bug,,紧凑树里节点label显示不全 #297

Closed wuchugit closed 5 years ago

wuchugit commented 5 years ago

image 两边的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错误。

huxiaoyun commented 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>
    );
  }
}