What approach is used in the Zuming in D3.js?



  • Sabj. For as long as I understand Zoom, I can arrange three ways:

    • transform: scale()
    • css-zoom
    • And manual recalculation of points on schedule

    What's used in D3? Thank you!



  • (d3) transform: scale()

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

    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
    .call(zoom);
    ...
    function zoomed() {
    container.attr("transform", "translate(" + d3.event.translate +")scale(" + d3.event.scale + ")");
    }

    Complete https://bl.ocks.org/mbostock/6123708 ♪




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2