Question

我创建了一个d3.js力布局，并希望根据屏幕分辨率设置初始缩放级别。我已经使用带有静态 scale 值的jQuery在页面加载时实现了它，并且它工作正常但是当我缩放时它会直接缩放到默认比例。

以下是代码：

var svg = d3.select("#grapharea")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(d3.behavior.zoom().scaleExtent([0.2, 3]).on("zoom", redraw)).on("dblclick.zoom", null)
.append('svg:g');

$( document ).ready(function() {
  scale = (0.24758571798325626);
  translate = [width*40/100,height*37/100];      
  svg.transition()
    .duration(750)
    .attr("transform", "translate(" + translate + ")scale(" + scale +    ")");
});

有没有办法在页面加载时设置默认比例值，这样当我缩放时它会正常缩放。

Answer 1

我还没有对此解决方案进行测试，但我认为您需要在转换结束时更新缩放行为的缩放/转换属性：

var zoomBehavior = d3.behavior.zoom()
  .scaleExtent([0.2, 3])
  .on("zoom", redraw);

var svg = d3.select("#grapharea")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(zoomBehavior)
.append('svg:g');

$( document ).ready(function() {
  scale = (0.24758571798325626);
  translate = [width*40/100,height*37/100];      
  svg.transition()
    .duration(750)
    .attr("transform", "translate(" + translate + ")scale(" + scale +    ")")
    .each("end", function () {
      zoomBehavior
        .scale(scale)
        .translate(translate);
    });
});

D3.js缩放初始缩放级别

1 个答案: