Javascript D3.js图像在角落问题_Javascript_D3.js_Force Layout

Javascript D3.js图像在角落问题

javascript d3.js

Javascript D3.js图像在角落问题,javascript,d3.js,force-layout,Javascript,D3.js,Force Layout,您好，我正在尝试实施此D3项目：像这样的图片：但我无法使源图像调整大小并随节点移动。代码如下： var nodesCreated = 1; var newDistance = 100; var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, fill = d3.scale.category20(), nodes = [],

您好，我正在尝试实施此D3项目：

像这样的图片：

但我无法使源图像调整大小并随节点移动。代码如下：

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);

}

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);

}

var nodesCreated=1；
var-newDistance=100；
var width=document.documentElement.clientWidth，
高度=document.documentElement.clientHeight，
fill=d3.scale.category20（），
节点=[]，
链接=[]；
var vis=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
vis.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var-force=d3.layout.force（）
.linkDistance（新距离）
.节点（节点）
.链接（links）
重力（.01）
.尺寸（[宽度、高度]）；
force.on（“勾号”，函数（）{
vis.selectAll（“line.link”）
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
vis.selectAll（“.node”）
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
});
var tempX=window.innerWidth/2；
var tempY=window.innerHeight/2；
变量点=tempX，tempY，
节点={imgsrc:“https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/48799_806120304_700633127_n.jpg"};
n=节点。推送（节点）；
vis.on（“mousedown”，function（））{
var point=d3.鼠标（此），
节点={imgsrc:“https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/211698_100002756979859_374256176_n.jpg"},
n=节点。推送（节点）；
nodesCreated++；
console.log（nodesCreated）；
var-tempCounter=0；
新距离==10；
力.连接距离（新距离）；
nodes.forEach（函数（目标）{
if（/*Math.sqrt（x*x+y*y）<100 |*/tempCounter==0）{
push（{source:node，target:target}）；
tempCounter++；
}
});
重启（）；
});
函数重新启动（）{
force.start（）；
vis.selectAll（“line.link”）
.数据（链接）
.enter（）.insert（“行”、“节点”）
.attr（“类”、“链接”）；
var realNode=vis.selectAll（“.node”）
.数据（节点）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.呼叫（强制拖动）；
realNode.append（“图像”）
.attr（“xlink:href”，函数（d）{return d.imgsrc；}）
.attr（“x”，-8）
.attr（“y”，-8）
.attr（“宽度”，160）
.attr（“高度”，160）；
}

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

你应该在节点上添加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};

及

然后需要将变换添加到

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; });


});


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);

}

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);

}

var nodesCreated=1；
var-newDistance=100；
var width=document.documentElement.clientWidth，
高度=document.documentElement.clientHeight，
fill=d3.scale.category20（），
节点=[]，
链接=[]；
var vis=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
vis.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var-force=d3.layout.force（）
.linkDistance（新距离）
.节点（节点）
.链接（links）
重力（.01）
.尺寸（[宽度、高度]）；
force.on（“勾号”，函数（）{
vis.selectAll（“line.link”）
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
vis.selectAll（“.node”）
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
vis.selectAll（“.node”）
.attr（“转换”，函数（d）{return“translate”（+d.x+），“+d.y+”）标度（0.30）”；}；
});
var tempX=window.innerWidth/2；
var tempY=window.innerHeight/2；
变量点=[tempX，tempY]，
节点={imgsrc:“https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/48799_806120304_700633127_n.jpg“，x:tempX，y:tempY}；
n=节点。推送（节点）；
vis.on（“mousedown”，function（））{
var point=d3.鼠标（此），
节点={imgsrc:“https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/211698_100002756979859_374256176_n.jpg，x:点[0]，y:点[1]}，
n=节点。推送（节点）；
nodesCreated++；
console.log（nodesCreated）；
var-tempCounter=0；
新距离==10；
力.连接距离（新距离）；
nodes.forEach（函数（目标）{
if（/*Math.sqrt（x*x+y*y）<100 |*/tempCounter==0）{
push（{source:node，target:target}）；
tempCounter++；
}
});
重启（）；
});
函数重新启动（）{
force.start（）；
vis.selectAll（“line.link”）
.数据（链接）
.enter（）.insert（“行”、“节点”）
.attr（“类”、“链接”）；
var realNode=vis.selectAll（“.node”）
.数据（节点）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.呼叫（强制拖动）；
realNode.append（“图像”）
.attr（“xlink:href”，函数（d）{return d.imgsrc；}）
.attr（“x”，-8）
.attr（“y”，-8）
.attr（“宽度”，160）
.attr（“高度”，160）；
}

谢谢。我发现问题出在图像属性上，我只是更改了“cx”和“cy”的“x”和“y”值，并将其放在勾号函数：node.attr（“transform”，函数（d）{return”translate（“+d.x+”，“+d.y+”）；}）；