d3 移动整个svg

1,123 阅读1分钟

移动整个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元素绑定一个数据,否则上面会一直报错