放大和缩小d3地图

Question

我做了这个热图。 （https://github.com/AlonBenAriVA/D3MapHeatMapSimpleHeat）。 工作良好。 如果社区中有人可以帮助我确定如何使用鼠标滚动和鼠标拖动来进行放大和缩小。 谢谢

Answer 1

Have a g element in svg and transform it on zoom, instead of svg element:

mapLayer = div.append('svg').attr('id', 'map')
        .attr('width', width).attr('height', height)
        .call(d3.zoom().on("zoom", zoomed)) // attach zoom handler to svg, but transform g element
        .append("g");

function zoomed() {
  // mapLayer is a g element
  mapLayer.attr("transform", d3.event.transform)
}