function onZoomStart(d) { // console.log('start zoom'); } function zooming(d) { // 缩放和拖拽整个g // console.log('zoom ing', d3.event.transform, d3.zoomTransform(this)); g.attr('transform', d3.event.transform); // 获取g的缩放系数和平移的坐标值。 } function onZoomEnd() { // console.log('zoom end'); } const zoom = d3.zoom() // .translateExtent([[0, 0], [WIDTH, HEIGHT]]) // 设置或获取平移区间, 默认为[[-∞, -∞], [+∞, +∞]] .scaleExtent([1 / 10, 10]) // 设置最大缩放比例 .on('start', onZoomStart) .on('zoom', zooming) .on('end', onZoomEnd);
三、其它效果1.单击节点时让连接线加粗
nodesCircle.on('click, (node) => { edges_line.style("stroke-width",function(line){ if(line.source.name==node.name || line.target.name==node.name){ return 4; }else{ return 0.5; } }); })
2.被点击的节点变色
nodesCircle.on('click, (node) => { nodesCircle.style('fill', (nodeOfSelected) => { // nodeOfSelected：所有节点, node: 选中的节点 if (nodeOfSelected.id === node.id) { // 被点击的节点变色 console.log('node') return '#36F'; } else { return '#9FF'; } }); })
四、在react中使用注意事项componentDidMount() { this.print(); } print() { let callback = (res) => { // callback获取后台返回的数据，并存入state let nodeData = res.data.nodes; let relationData = res.data.rels; this.setState({ nodeData: res.data.nodes, relationData: res.data.rels, }); let nodes = []; for (let i = 0; i < nodeData.length; i++) { nodes.push({ id: （nodeData[i] && nodeData[i].id） || '', name: (nodeData[i] && nodeData[i].name) || '', type: (nodeData[i] && nodeData[i].type) || '', definition: (nodeData[i] && nodeData[i].definition) || '', }); } let edges = []; for (let i = 0; i < relationData.length; i++) { edges.push({ id: (relationData[i] && (relationData[i].id)) || '', source: (relationData[i] && relationData[i].start.id） || '', target: (relationData[i] && relationData[i].end.id） || '', tag: (relationData[i] && relationData[i].name) || '', }); } this.forceChart(nodes, edges); // d3力导向图内容 }; this.props.dispatch(getDataFromNeo4J({ neo4jrun: 'match p=(()-[r]-()) return p limit 300', }, callback)); }
在哪里构造图 因为图是动态的，如果渲染多次（render执行多次，渲染多次），不会覆盖前面渲染的图，反而会造成渲染多次，出现多个图的现象。把构造图的函数print()放到componentDidMount()内执行，则只会渲染一次。
对节点和连线数据进行增删改操作后，需要再次调用print()函数，重新构造图。
从哪里获取数据 数据不从redux获取，发送请求后callback直接获取。