我正在使用react-graph-vis来可视化网络.根据vis.js文档,我可以通过向键提供适当的manipulation对象来打开操作系统options.我正在尝试向Add Edge可视化GUI 添加一个按钮,这或多或少是我配置组件的方式:
class MyComponent extends React.Component {
constructor(props) {
var graph = /* initial graph */;
this.state = {
options: {
manipulation: {
enabled: true, initiallyActive: true, addEdge: true
}
},
graph: graph
}
}
render() {
return <Graph graph={this.state.graph}, options={this.state.options}/>
}
}
Run Code Online (Sandbox Code Playgroud)
组件呈现指定graph但GUI中缺少操作系统.也就是说,添加manipulation条目options根本没有效果.特别是,没有edit或add edge按钮,因此无法操纵图形.我没有得到任何错误,问题只是操纵系统没有被渲染.添加其他选项(例如与网络布局相关的选项)可以正常工作.它只是manipulation似乎没有设置的选项.
我正在使用 W3C CSS 验证器,它说我的以下代码有错误:
属性 text-wrap 不存在:抑制 抑制
.fieldLabelRed {
padding: 0px 2px 0px 2px;
margin: 0px 10px 0px 0px;
color: #FF0000;
text-wrap: suppress; /* <--- This line */
}
Run Code Online (Sandbox Code Playgroud)
我查看了CSS手册,这就是我发现的,但我没有看到任何错误:文本换行设置:'text-wrap'属性
我已经使用 CSS 2.1 和 3.0 进行了验证,并且都给出了相同的错误。
我正在研究一个包装了react-graph-visGraph组件的React组件。我的组件应该呈现一个特定的图形并提供一个用于向该图形添加节点的按钮。
我所做的工作的简化版本是以下组件,该组件呈现了一个(单节点)图形和一个按钮。单击该按钮应该在图上添加第二个节点。
class GraphWrapper extends React.Component {
constructor(props) {
var graph = {nodes: [{id: 1, label: '1'}], edges: []};
this.state = {
options: {},
graph: graph
};
}
addNode() {
var graph = this.state.graph;
graph.nodes.push({id: 2, label: '2'});
this.setState({});
}
render() {
return <div>
<Graph graph={this.state.graph}, options={this.state.options}/>
<button onClick={this.addNode.bind(this)}>Add Node</button>
</div>;
}
}
Run Code Online (Sandbox Code Playgroud)
初始图已正确呈现。同样,单击按钮可以按预期更改状态。但是,图形可视化不会改变,第二个节点也不会显示,<Graph/>尽管状态发生了变化,但好像没有重新渲染组件。
我想念什么?