Question

通过反应应用渲染网络可视化时，我遇到边缘颜色问题。

我有一个包含网络的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中呈现）。

然而，在我的反应应用中，边缘的颜色为do not display

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

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

Answer 1

我想我有一个解决方案（我遇到了和你一样的问题，但后来又出现在Angular2中）。

尝试将颜色设置为Object（请参阅http://visjs.org/docs/network/edges.html）并将inherit属性指定为false。例如（使用打字稿）

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

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

vis.js network：在react.js app中不显示边缘颜色

1 个答案: