0

通过 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>
}

最终的网络应该是这样的（在普通的 html+js 应用程序中呈现）。

但是在我的反应应用程序中，边缘的颜色不显示

我查看了网络数据结构的内部（通过console.log(network)组件末尾的挂载）。body.data.edges结构部分包含 正确的颜色值。但是该body.edge.[id].options.color部分是空的

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

4

1 回答 1

2

我想我有一个解决方案（我遇到了和你一样的问题，但是在 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
      }

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

于 2018-03-30T08:18:25.040 回答