移动整个svg
有时候想要移动整个svg的图形,这样不是很好处理,可以在svg里边添加一个g元素,这样相当于变相的实现了移动整个svg元素 关键代码
dragged(d) {
this.svg.attr(
"transform",
"translate(" + (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")"
);
}
const dragcontainer = d3.drag().on("drag", this.dragged);
this.svg = this.getContext()
.datum({ x: 0, y: 0 })
.call(dragcontainer);
getContext() {
return d3
.select(this.refs.networkWrap)
.attr("width", this.width)
.attr("height", this.height)
.attr("viewBox", "0 0 " + this.width + " " + this.height)
.append("g");
}
这里最主要的就是这里
this.svg = this.getContext()
.datum({ x: 0, y: 0 })
这里必须首先为我们添加的g元素绑定一个数据,否则上面会一直报错