3

こんにちは、この 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);

}

Google でヘルプを探していましたが、解決策が見つかりませんでした。

4

1 に答える 1

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

}​
于 2012-10-25T13:27:25.540 に答える