javascript - D3 Zoom with Scrollbars 用作平移，滚动条宽度和高度调整为缩放比例

Question

我想创建以下内容:

制作动态图

它是可缩放的(在当前显示的中心缩放)(单击某些按钮时缩放，禁用鼠标滚轮进行缩放)

元素是可拖动的(拖动时不受力图排列的影响)(当元素被拖动到 svg 之外时，svg 的大小会增大)

它具有用作平移

的滚动条

到目前为止，我已经成功了

创建力图

创建缩放

元素已可拖动，拖动后不生效

滚动条还有

我对这些组合项目有两个问题:

拖动元素后，它不再包含在力图中。如果是新元素，这将导致其他元素可能重叠。

具有缩放功能的滚动条不起作用，当您缩放->滚动->缩放时，它会缩放到第一次缩放发生的旧位置。

对于这两个问题，我真的需要帮助。我还没有看到缩放和滚动条组合的任何示例。

这是代码。

function drawGraph(Data){
setDefault();

svg = d3.select("#graphingArea").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .call(zoom)
  .on("dblclick.zoom", false)
  .on("mousewheel.zoom", false)
  .on("DOMMouseScroll.zoom", false) // disables older versions of Firefox
  .on("wheel.zoom", false); // disables newer versions of Firefox;

//Needed for canvas to be dragged
rect = svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .style("fill", "none")
  .style("pointer-events", "all");

//Holds all that is to be dragged by the canvas
container = svg.append("g");

//Call zoom before drawing
svg.call(zoomUpdate);

//FOR DRAG
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);

//Creating data that is drawn
populateD3Data(container, drag);

// Set data to be Force Arranged
force = self.force = d3.layout.force()
.nodes(nodes)
.links(links)
.distance(150)
.charge(-1000)
.size([width,height])
.start();

//Event to call arrange
force.on("tick", tick);
}

缩放js:

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

function zoomed() {
  if(container != null && container != undefined) {
      var translate = zoom.translate(),
      scale = zoom.scale();

      tx = Math.min(0, Math.max(width * (1 - scale), translate[0]));
      ty = Math.min(0, Math.max(height * (1 - scale), translate[1]));

      zoom.translate([tx, ty]);
      container.attr("transform", "translate(" + [0,0] + ")scale(" + zoom.scale() + ")");

      svg.attr("width", AreaWidth_ * zoom.scale());
      svg.attr("height", AreaHeight_ * zoom.scale());

      $("#graphingArea").scrollLeft(Math.abs(zoom.translate()[0]));
      $("#graphingArea").scrollTop(Math.abs(zoom.translate()[1]));
  }
}

//Button event for zoom in
d3.select("#zoom_in")
    .on("click", zoomInOrOut);

//Button event for zoom out
d3.select("#zoom_out")
    .on("click", zoomInOrOut);

//Gets the center of currently seen display
function interpolateZoom (translate, scale) {
    return d3.transition().duration(1).tween("zoom", function () {
        var iTranslate = d3.interpolate(zoom.translate(), translate),
            iScale = d3.interpolate(zoom.scale(), scale);
        return function (t) {
            zoom
                //Round number to nearest int because expected scale for now is whole number
                .scale(Math.floor(iScale(t)))
                .translate(iTranslate(t));
            zoomed();
        };
    });
}

function zoomInOrOut() {
    var direction = 1,
        target_zoom = 1,
        center = [graph_area_width / 2, graph_area_height / 2],
        extent = zoom.scaleExtent(),
        translate = zoom.translate(),
        translate0 = [],
        l = [],
        view = {x: translate[0], y: translate[1], k: zoom.scale()};

    d3.event.preventDefault();
    direction = (this.id === 'zoom_in') ? 1 : -1;
    target_zoom = zoom.scale() + (direction * zoom_scale);

    if (target_zoom < extent[0] || target_zoom > extent[1]) { return false; }

    translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];
    view.k = target_zoom;
    l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];

    view.x += center[0] - l[0];
    view.y += center[1] - l[1];

    interpolateZoom([view.x, view.y], view.k);
}

function zoomUpdate() {
    var target_zoom = 1,
    center = [graph_area_width / 2, graph_area_height / 2],
    extent = zoom.scaleExtent(),
    translate = zoom.translate(),
    translate0 = [],
    l = [],
    view = {x: translate[0], y: translate[1], k: zoom.scale()};

    target_zoom = zoom.scale();

    if (target_zoom < extent[0] || target_zoom > extent[1]) { return false; }

    translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];
    view.k = target_zoom;
    l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];

    view.x += center[0] - l[0];
    view.y += center[1] - l[1];

    interpolateZoom([view.x, view.y], view.k);
}

Answer 1

这是我将 d3-zoom 与滚动条结合起来的看法:
https://stackblitz.com/edit/d3-pan-and-zoom

除了处理 d3 的缩放以更新滚动条位置外，您还需要通过调用 translateTo() 处理使用滚动条的滚动以更新 d3 的内部缩放表示。 .