0

I have to display the images in circles.I tried the code available in stack overflow but it doesn't work for me image .I tried using svg pattern. I tried using nodeEnter.append("image") and nodeEnter.append("circle") also but getting squares images only. Many thanks in advance.

          function update() {
            var nodes = flatten(root),
            links = d3.layout.tree().links(nodes);
            force.nodes(nodes).links(links).start();

            link = link.data(links, function(d) { return d.target.id; });
            link.exit().remove();
            link.enter().insert("line", ".node")
           .attr("style", function(d) { if(d.target.strength==1){ return "stroke:Red"; } else if(d.target.strength==2) { return "stroke:Green"; } else if(d.target.strength==3) { return "stroke:yellow"; }
                                                                            else return "stroke:Blue" })
           .attr("class", "link");
            node = node.data(nodes, function(d) { return d.id; });
            node.exit().remove();

            var nodeEnter = node.enter().append("g").attr("class", "node").on("click", click).on("mouseover", showDetails)
                   .on("mouseout", hideDetails).call(force.drag);

            nodeEnter.append("svg:image")
              .attr("xlink:href", function(d){ return d.imgUrl;})
              .attr("x", -10)
              .attr("y", -10)
              .attr("width", 32)
              .attr("height", 32);
              //.attr("radius", function(d) { return Math.sqrt(d.size) / 10 || 15; });  

          node.select("circle").style("fill", color);
        }
ns reddeppa
  • 11
  • 1
  • 1
    I just answered this today. Yoy have to use pattern: http://stackoverflow.com/a/43916372/5768908 – Gerardo Furtado May 12 '17 at 12:37
  • Have you tried solution given in the similar question? http://stackoverflow.com/questions/19202450/adding-an-image-within-a-circle-object-in-d3-javascript – user3711952 May 12 '17 at 12:38
  • Please read [ask] and [mcve]. – Imanuel May 12 '17 at 13:35
  • Possible duplicate of [D3.js Force Direct Graph - png's in circles - making the images circular](http://stackoverflow.com/questions/43915724/d3-js-force-direct-graph-pngs-in-circles-making-the-images-circular) – lax1089 May 12 '17 at 15:25
  • thanq Gerardo Furtado, user3711952 and lax1089 for your help.finally got the solution – ns reddeppa May 16 '17 at 12:07

0 Answers0