to append an 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 round i have tried to use this code

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

but it didn't work.. i also tried this one

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

</style>

but to no avail. .

to append an 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 round i have tried to use this code

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

but it didn't work.. i also tried this one

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

</style>

but to no avail. .

• javascript
• image
• d3.js
• append

1 Answer 1

You need to use patterns.

1. Create patterns containing the images you want to use in a <defs> tag.
2. Use a circle
3. Set circle fill to one of the patterns 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 the image:

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

And then setting the fill:

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

A JS Fiddle example: http://jsfiddle/wcnxywuy/1/