Question

我已经从d3.js演示页面实现了Force Directed Graph。我想在图表上启用缩放和拖动。到目前为止，我能得到的最好是this fiddle缩放和翻译工作，但d3.event.scale比例太大了。只是一些示例输出：

Base: translate: 0,0, scale: 1.0000000000000002    
1 zoom in: translate: -276691.7368930365,-243364.72096474364, scale: 776.0468820533237
2 zoom in: translate: -215002451.4426526,-189105797.62743115, scale: 602248.7631446852
3 zoom in: translate: -166852258767.62857,-146755207991.69574, scale: 467373274.8589036
4 zoom in: translate: -129485175456864.23,-113888921830407.19, scale: 362703572709.30316
Back to base: translate: 0,0, scale: 1.0000000000000004
1 zoom out: translate: 356.53997624595127,313.59538526954816, scale: 0.0012885819441141556
2 zoom out: translate: 356.9994072216967,313.999478620764, scale: 0.000001660443426697016
3 zoom out: translate: 356.99999923615655,313.99999932816013, scale: 2.13961741886481e-9
4 zoom out: translate: 356.9999999990157,313.9999999991343, scale: 2.757072373261327e-12

如果放大，它会变大，基本上你的整个屏幕都会被填满。如果你缩小你看不到任何东西。如何将d3.event.scale比率更改为更小？到目前为止，这段代码与缩放/翻译有关：

var width = Math.max(document.documentElement.clientWidth,
                window.innerWidth || 0);
var height = Math.max(document.documentElement.clientHeight,
                window.innerHeight || 0);
//Define width & height as big as window

var svg = d3.select("body").attr('width', width).attr('height',
                height).attr("pointer-events", "all").append("svg").append(
                "g").call(d3.behavior.zoom().on("zoom", zoom)).append("g");
//Add svg tag to body

svg.append('rect').attr('width', width).attr('height', height)
                .attr('fill', 'white');

function zoom() {
    svg.attr("transform", "translate(" + d3.event.translate + ")"
        + " scale(" + d3.event.scale + ")");
    java.getData("translate: " + d3.event.translate + ", scale: "
                    + d3.event.scale);
}

此时我不确定是否值得一提，但在<g></g>标签下我创建了一个用于存储圆圈和标签的组

var gnodes = svg.selectAll('g.gnode').data(graph.nodes).enter()
                    .append('g').classed('gnode', true);
//Create the groups under svg

由于我是JavaScript的新手，我可能会忽略缩放行为出错的地方，如果需要额外的片段，请告诉我。

注意：java.getData(String data);是来自“桥类”的方法，用于将JavaScript页面与JavaFX WebView和Java代码连接。

编辑：

var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, height])
    .range([height, 0]);        

var svg = d3.select("body").attr('width', width).attr('height',
    height).attr("pointer-events", "all").append("svg").append(
    "g").call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom)).append("g");
//Add svg tag to body

现在我有了这个输出：

1 zoom in: translate: -798,-1337, scale: 8
Normal: translate: 0,0, scale: 1

缩放现在仅限于8级.1鼠标滚轮触发器缩放到8，内容可读，但仍然太大，缩放＆lt; 1不可能。是否可以定义更好的缩放？尝试过：scaleExtent([1, 2, 4, 8])和scaleExtent([.5, 1, 2, 4, 8])第一个缩放1或2，第二个缩放0.5或1.我不能定义超过2个比率？

到目前为止我工作的Fiddle并没有在浏览器中绘制svg，但是在fx中，遗憾的是没有调试器。

太大的d3.event.scale变焦处理

0 个答案: