vis.js 网络：react.js 应用中未显示边缘颜色

Question

我在通过 React 应用程序渲染网络可视化时遇到边缘颜色问题。

我有一个包含网络的 MindMapComponent。

我通过组件的道具接收网络数据：

class MindMapComponent extends React.Component {

//React component to display a single submission Item.
//Displays the text and author of a Perspective Item


constructor(props) {
    super(props);
    this.state = {map: props.mindMap, node_options: props.node_options, edge_options: props.edge_options}
}

然后我继续在我的 componentDidMount 函数中创建网络：

componentDidMount(){
    var edge_dataset = new vis.DataSet(JSON.parse(this.state.map.conceptmap_edges));
    var nodes_dataset = new vis.DataSet(JSON.parse(this.state.map.conceptmap_nodes));
    var data = {
        nodes:nodes_dataset ,
        edges: edge_dataset
    };
    var edge_options =JSON.parse(this.state.edge_options);
    edge_options.color = {inherit:false};
    var options = {
        edges: edge_options,
        nodes: JSON.parse(this.state.node_options),
        physics: false,
        locale: 'en',
        interaction: {
            navigationButtons: true,
            keyboard: true,
            hover: true
        }
    };
    var network = new vis.Network(this.refs.network, data,options)
    console.log(network);
}

最后在我的渲染函数中渲染整个东西

render() {
    const liStyle = {
        borderStyle: 'outset',
        backgroundColor: 'lightgrey',
        marginBottom: '10px',
        listStyleType: 'none'
    };

    const metaStyle = {
        paddingLeft: '15px'
    }

    const networkStyle = {
        height:'250px',
        borderRight:'dashed 2px'
    }
    var dateString = new Date(this.state.map.date_added);
    dateString = dateString.getDate() + "/" + (dateString.getMonth() +1) + "/" + dateString.getFullYear();

    return <li key={this.state.map.id} style={liStyle}>
        <div className = 'row'>
            <div className = 'col-lg-8' ref = "network" style = {networkStyle}></div>
            <div className = 'col-lg-4' style = {metaStyle}><br/><p>Submitted on: {dateString}</p></div>

        </div>
    </li>
}

最终网络should look like this（在普通html+js app中呈现）。

但是在我的 React 应用程序中，边缘的颜色 do not display

我看了一下网络数据结构（通过组件末尾的console.log(network)挂载）。结构的 body.data.edges 部分包含 the correct color value. However the body.edge.[id].options.color part is empty

我相信这是我的问题的根源，但我不确定我的分析是否正确或如何解决它。

Answer 1

我想我有一个解决方案（我运行遇到了和你一样的问题，但是在 Angular2 中）。

尝试将颜色设置为对象（参见 http://visjs.org/docs/network/edges.html）并将继承属性指定为 false。例如（使用打字稿）

   const myEdge: Edge =  {
        id: 'myEdge',
        from: 'NODE1',
        to: 'NODE2',
        arrows: 'to',
        color: {color: '#ff0000', inherit: false};
        dashes: true
      }

您可能还想设置突出显示和悬停颜色

vis.js 网络：react.js 应用中未显示边缘颜色

vis.js network: Edge colors not displaying in react.js app

reactjs

graph

colors

vis.js

vis.js-network