Unable to append images over nodes in d3.js

Question

I am trying to append images on rectangles and images locations are present in my array named arrFileUrl. Nodes of this color are white and I want to append these images on each of the generated rectangles. How can I do this?

var arrFileUrl = [], arrBrightness = [], arrPattern = [], arrSize = [];

var width = 1260,
height = 1200;

var fill = d3.scale.category10();

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

d3.csv("data/Images.csv", function(error, data) {

    data.forEach(function(d) {

        arrFileUrl.push(d['FingerImageName']);

    });

    var nodes = d3.range(arrSize.length).map(function(i) {
      return {index: i};
    });

    var force = d3.layout.force()
    .nodes(nodes)
    .gravity(0.05)
    .charge(-1700)
    .friction(0.5)
    .size([width, height])
    .on("tick", tick)
    .start();


    var node = svg.selectAll(".node")
        .data(nodes)
        .enter().append("rect")
        .attr("class", "node")
        .attr("width", 120)
        .attr("height", 160)
        .style("fill", "#fff")
        .style("stroke", "black")
        .call(force.drag);


    node.append("image")
  .attr("xlink:href", "https://github.com/favicon.ico")
  .attr("x", 16)
  .attr("y", 16)
  .attr("width", 100)
  .attr("height", 120);

    svg.style("opacity", 1e-6)
      .transition()
        .duration(1000)
        .style("opacity", 1);


    function tick(e) {

      // Push different nodes in different directions for clustering.
      var k = 6 * e.alpha;
      nodes.forEach(function(o, i) {
        o.y += i & 1 ? k : -k;
        o.x += i & 2 ? k : -k;
      });

      node.attr("x", function(d) { return d.x; })
          .attr("y", function(d) { return d.y; });
    }

});

No it doesn't. Only floating rectangles are seen without images which I want — shanky, Mar 09 '16 at 20:35
See this, http://stackoverflow.com/questions/17418527/how-do-i-replace-a-node-with-an-image-using-d3-and-coffeescript-for-a-network-vi — Harshal Carpenter, Mar 09 '16 at 20:37

score 1 · Answer 1 · answered Mar 10 '16 at 00:36

Do it this way:

var node = svg.selectAll(".node")
        .data(nodes)
        .enter().append("g");//make groups

//add rectangle to the group
node.append("rect")
        .attr("class", "node")
        .attr("width", 120)
        .attr("height", 160)
        .style("fill", "#fff")
        .style("stroke", "black")
        .call(force.drag);
//add image to the group
    node.append("image")
  .attr("xlink:href", "https://github.com/favicon.ico")
  .attr("x", 16)
  .attr("y", 16)
  .attr("width", 100)
  .attr("height", 120);

Tick function translate the full group

function tick(e) {

      // Push different nodes in different directions for clustering.
      var k = 6 * e.alpha;
      nodes.forEach(function(o, i) {
        o.y += i & 1 ? k : -k;
        o.x += i & 2 ? k : -k;
      });
      //do transform
      node.attr("transform", function(d) { 
       return "translate(" + d.x + "," + d.y + ")"; 
      })

}

Problem in your code:

You were appending the image inside the rectangle DOM that is reason why image is not visible.
In tick function you are moving the x and y alone and not of the image, the approach should have been moving both of them in a group and translating the group as done above.

Unable to append images over nodes in d3.js

1 Answers1