D3 V4 各种鼠标事件的添加

目录

一、拖拽节点

二、放大缩小

---

D3  V4 各种鼠标事件的添加

一、拖拽节点

//定义拖拽事件
function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}

//

//节点绑定事件
g.selectAll("circle")
    .data(points)
  .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 2.5)
    .call(d3.drag()
        .on("drag", dragged));

二、放大缩小

//添加事件
function zoomed() {
  let g = d3.selectAll('svg')     //选择所有的svg元素
// let g = d3.selectAll('g')     //选择所有的g元素
  g.attr("transform", d3.event.transform);
}


//整个svg绑定事件
svg.call(d3.zoom()
    .scaleExtent([1 / 2, 8])  //设置可缩放的范围
    .on