相关疑难解决方法(0)

我正在用d3.js画一个散点图.借助此问题:
获取屏幕大小,当前网页和浏览器窗口

我正在使用这个答案:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

所以我能够将我的情节适合用户的窗口,如下所示:

var svg = d3.select("body").append("svg")
        .attr("width", x)
        .attr("height", y)
        .append("g");

现在我想在用户调整窗口大小时,需要注意调整绘图的大小.

PS:我的代码中没有使用jQuery.

已经通过SVG几何变焦显示了用于力导向图几何缩放的许多情况.

在几何缩放中,我只需要在缩放功能中添加变换属性.但是,在语义缩放中,如果我只在节点中添加转换属性,则链接将不会连接到节点.所以,我想知道在d3中是否存在用于力导向图的几何缩放的解决方案.

这是我的例子与下面前一种情况的几何变焦.我有两个问题:

1. 当我缩小,然后拖动整个图形时,图形将奇怪地消失.
2. 使用相同的重绘功能

function zoom() {
  vis.attr("transform", transform);
}
function transform(d){
  return "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")";
}

Run Code Online (Sandbox Code Playgroud)

这只更新了一个svg元素的"transform"属性.但是如何使功能改变节点位置？

但我想要做的是语义缩放.我试图修改缩放和转换功能,但不确定正确的方法.这是我尝试的.我改变的功能:

function zoom() {
  node.call(transform);
  // update link position
  update();
}
function transform(d){
  // change node x, y position, not sure what function to put here.
}

Run Code Online (Sandbox Code Playgroud)