CODEWITHSUNDEEP
d3.js
Prakash
Prakash

Reputation: 165

Map marker on d3 node

enter image description here

Need to add a Map maker on the d3 nodes like this. This is edited image.

nodeEnter
  .append("img")
  .attr("src","https://lh4.ggpht.com/Tr5sntMif9qOPrKV_UVl7K8A_V3xQDgA7Sw_qweLUFlg76d_vGFA7q1xIKZ6IcmeGqg=w300");

I tried like this. when i did inspect with firebug. i could see the img tag. but map maker was not seen on the nodes.

Upvotes: 0

Views: 94

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Do it like this Add the image url inside your data like this:

 "nodes": [
    {
      "type": "S",
      "id": "1",
      "name": "100",
            "img":"https://lh4.ggpht.com/Tr5sntMif9qOPrKV_UVl7K8A_V3xQDgA7Sw_qweLUFlg76d_vGFA7q1xIKZ6IcmeGqg=w300"
    },

To the node add image like this:

nodeEnter
    .append("image")
  .attr("xlink:href", function(d) { return d.img; })
  .attr("x", "-12px")
  .attr("y", "-44px")
  .attr("width", "24px")
  .attr("height", "24px");

  ;

Working code here

Hope this helps!

Upvotes: 3

Related Questions