javascript - 角落问题的 D3.js 图像

Question

您好我正在尝试实施这个 D3 项目http://bl.ocks.org/929623：

像这样的图像http://bl.ocks.org/950642：

但我无法使源图像调整大小并与节点一起移动。继承人的代码：

var nodesCreated = 1;
var newDistance = 100;
var width =  document.documentElement.clientWidth,
    height = document.documentElement.clientHeight,
    fill = d3.scale.category20(),
    nodes = [],
    links = [];

var vis = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);

vis.append("rect")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .linkDistance(newDistance)
    .nodes(nodes)
    .links(links)
    .gravity(.01)
    .size([width, height]);

force.on("tick", function() {
vis.selectAll("line.link")
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

vis.selectAll(".node")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });


});


var tempX = window.innerWidth/2;
var tempY = window.innerHeight/2;
var point = tempX,tempY,
node = {imgsrc: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/48799_806120304_700633127_n.jpg"};
n = nodes.push(node);


vis.on("mousedown", function() {
      var point = d3.mouse(this),
      node = {imgsrc: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/211698_100002756979859_374256176_n.jpg"},
      n = nodes.push(node);
      nodesCreated++;
      console.log(nodesCreated);
      var tempCounter = 0;

      newDistance == 10;
      force.linkDistance(newDistance);
      nodes.forEach(function(target) {
          if (/*Math.sqrt(x * x + y * y) < 100 ||*/ tempCounter == 0) {
              links.push({source: node, target: target});
              tempCounter++;
          }
      });

  restart();
});


function restart() {
  force.start();

  vis.selectAll("line.link")
      .data(links)
    .enter().insert("line", ".node")
      .attr("class", "link");

var realNode = vis.selectAll(".node")
      .data(nodes)
      .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

      realNode.append("image")
      .attr("xlink:href", function(d) { return d.imgsrc; })
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 160)
      .attr("height", 160);

}

我一直在谷歌寻求帮助，但没有找到解决方案。

Answer 1

您应该将 X 和 Y 坐标添加到您的节点：

var tempX = window.innerWidth/2;
var tempY = window.innerHeight/2;
var point = [tempX,tempY],
    node = {imgsrc: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/48799_806120304_700633127_n.jpg", x: tempX, y: tempY};

和

  var point = d3.mouse(this),
      node = {imgsrc: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/211698_100002756979859_374256176_n.jpg", x:point[0], y:point[1]},
      n = nodes.push(node);

然后需要给force.on("tick"....函数添加一个变换：

 vis.selectAll(".node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ") scale(0.30)"; });

这会将您的图像缩小到 30%，但您可以对其进行配置。

为了完整起见，这里是所有代码：

var nodesCreated = 1;
var newDistance = 100;
var width =  document.documentElement.clientWidth,
    height = document.documentElement.clientHeight,
    fill = d3.scale.category20(),
    nodes = [],
    links = [];

var vis = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);

vis.append("rect")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .linkDistance(newDistance)
    .nodes(nodes)
    .links(links)
    .gravity(.01)
    .size([width, height]);

force.on("tick", function() {
vis.selectAll("line.link")
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

 vis.selectAll(".node")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

 vis.selectAll(".node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ") scale(0.30)"; });

});


    var tempX = window.innerWidth/2;
    var tempY = window.innerHeight/2;
    var point = [tempX,tempY],
        node = {imgsrc: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/48799_806120304_700633127_n.jpg", x: tempX, y:tempY};
    n = nodes.push(node);


vis.on("mousedown", function() {
  var point = d3.mouse(this),
      node = {imgsrc: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/211698_100002756979859_374256176_n.jpg", x:point[0], y:point[1]},
      n = nodes.push(node);
      nodesCreated++;
      console.log(nodesCreated);
      var tempCounter = 0;

  newDistance == 10;
  force.linkDistance(newDistance);
  nodes.forEach(function(target) {
    if (/*Math.sqrt(x * x + y * y) < 100 ||*/ tempCounter == 0) {
      links.push({source: node, target: target});
      tempCounter++;
    }
  });

  restart();
});


function restart() {
  force.start();

  vis.selectAll("line.link")
      .data(links)
    .enter().insert("line", ".node")
      .attr("class", "link");

var realNode = vis.selectAll(".node")
      .data(nodes)
      .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

      realNode.append("image")
      .attr("xlink:href", function(d) { return d.imgsrc; })
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 160)
      .attr("height", 160);

}​