Clever Geek Handbook

How to make an image round in d3.js

to add image i use this code

       node.append("image")
            .attr("xlink:href", function(d) { return d.img; })
            .attr("x", -25)
            .attr("y", -25)
            .attr("width", 50)
            .attr("height", 50)

I want the image to be rounded, I tried using this code

   .attr("style", "border-radius: 30px;");

but it didn't work. I tried this one too

<style>
   .node image{
      border-color: 2px solid orange;
       border-radius: 25px;
    }

</style>

but to no avail. ...

+3


source to share


1 answer


You need to use templates.

  • Create templates containing the images you want to use in the tag <defs>

    .
  • Use a circle
  • Set the fill of the circle to one of the templates you created.

eg:.

var defs = svg.append("defs").attr("id", "imgdefs")

var catpattern = defs.append("pattern")
                        .attr("id", "catpattern")
                        .attr("height", 1)
                        .attr("width", 1)
                        .attr("x", "0")
                        .attr("y", "0")

Adding an image:



catpattern.append("image")
     .attr("x", -130)
     .attr("y", -220)
     .attr("height", 640)
     .attr("width", 480)
     .attr("xlink:href", imgurl)

And then set the fill:

svg.append("circle")
    .attr("r", 100)
    .attr("cy", 80)
    .attr("cx", 120)
    .attr("fill", "url(#catpattern)")

JS Fiddle example: http://jsfiddle.net/wcnxywuy/1/

+7


source






More articles:


All Articles