Javascript D3使用滚动条进行缩放，滚动条的宽度和高度可根据缩放比例进行调整

我要创建以下内容：

制作一个动态图表

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

元素是可拖动的（拖动时不受力图排列的影响）（当元素拖动到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);
}

var zoom=d3.behavior.zoom（）
.scaleExtent（[zoom\u min\u scale，zoom\u max\u scale]）
。打开（“缩放”，缩放）；
函数缩放（）{
if（container！=null&&container！=未定义）{
var translate=zoom.translate（），
scale=zoom.scale（）；
tx=数学最小值（0，数学最大值（宽度*（1-刻度），平移[0]）；
ty=Math.min（0，Math.max（高度*（1-刻度），平移[1]）；
缩放。平移（[tx，ty]）；
container.attr（“transform”、“translate”（++[0,0]+”）比例（“+zoom.scale（）+”））；
attr（“width”，AreaWidth_*zoom.scale（））；
attr（“height”，AreaHeight_*zoom.scale（））；
$（“#graphingArea”）.scrollLeft（Math.abs（zoom.translate（）[0]）；
$（“#graphingArea”）.scrollTop（Math.abs（zoom.translate（）[1]）；
}
}
//放大按钮事件
d3.选择（“放大”）
。打开（“单击”，zoomInOrOut）；
//用于缩小的按钮事件
d3.选择（“缩小”）
。打开（“单击”，zoomInOrOut）；
//获取当前显示的中心
函数插值空间（平移、缩放）{
返回d3.transition（）.duration（1.tween（“缩放”），函数（）{
var iTranslate=d3.interpolate（zoom.translate（），translate），
iScale=d3.插值（zoom.scale（），scale）；
返回函数（t）{
快速移动
//将数字舍入为最接近的整数，因为目前预期的小数位数为整数
.比例（数学楼层（iScale（t）））
.翻译（iTranslate（t））；
缩放（）；
};
});
}
函数zoomInOrOut（）{
var方向=1，
目标缩放=1，
中心=[图形面积宽度/2，图形面积高度/2]，
extent=zoom.scaleExtent（），
translate=zoom.translate（），
translate0=[]，
l=[]，
视图={x:translate[0]，y:translate[1]，k:zoom.scale（）}；
d3.event.preventDefault（）；
方向=（this.id=='zoom_in'）？1:-1；
target_zoom=zoom.scale（）+（方向*缩放比例）；
if（target_zoomextent[1]）{return false；}
translate0=[（中间[0]-view.x）/view.k，（中间[1]-view.y）/view.k]；
view.k=目标\缩放；
l=[translate0[0]*view.k+view.x，translate0[1]*view.k+view.y]；
视图x+=中心[0]-l[0]；
视图y+=中心[1]-l[1]；
插值空间（[view.x，view.y]，view.k）；
}
函数zoomUpdate（）{
var target_zoom=1，
中心=[图形面积宽度/2，图形面积高度/2]，
extent=zoom.scaleExtent（），
translate=zoom.translate（），
translate0=[]，
l=[]，
视图={x:translate[0]，y:translate[1]，k:zoom.scale（）}；
target_zoom=zoom.scale（）；
if（target_zoomextent[1]）{return false；}
translate0=[（中间[0]-view.x）/view.k，（中间[1]-view.y）/view.k]；
view.k=目标\缩放；
l=[translate0[0]*view.k+view.x，translate0[1]*view.k+view.y]；
视图x+=中心[0]-l[0]；
视图y+=中心[1]-l[1]；
插值空间（[view.x，view.y]，view.k）；
}

以下是我对d3缩放与滚动条相结合的看法：

---

除了处理d3的缩放以更新滚动条位置外，您还需要通过调用

translateTo（）

来处理滚动条以更新d3的内部缩放表示，您是否得到了答案？因为我也在尝试实现带有缩放的滚动条。