d3.js v4拖动缩放元素跳跃鼠标

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var zoom = d3.zoom()
             .scaleExtent([1, 10])
             .on("zoom", zoomed);

svg.call(zoom);

var drag = d3.drag()
             .on("start", dragstarted)
             .on("drag", dragged)
             .on("end", dragended);

var element = svg.append("circle")
                 .attr("cx", 50)
                 .attr("cy", 50)
                 .attr("r", 20)
                 .call(drag);

function zoomed() {
  element.attr("transform", d3.event.transform);
}

function dragstarted() {
  d3.select(this).raise().classed("active", true);
}

function dragged() {
  d3.select(this).attr("cx", d3.event.x).attr("cy", d3.event.y);
}

function dragended() {
  d3.select(this).classed("active", false);
}