D3: easiest way to insert images inside a circle

Question

Basically, I try to assign a class into the node.append("image") and try to use border-radius: 50% to turn them to circle, but the CSS do not seem like it applied on those images.

        node.append("image")
            .attr("xlink:href", d=> d.url)

      //Assigned a class for all nodes
            .classed("MakeItround", true)

            //people icon's location (x,y)
            .attr("x", function(d) { return d.weight * 2-35; })
            .attr("y", height/15 -38)

            //people icon's size
            .attr("width", width/15)
            .attr("height", height/15)

This is the CSS I'd like to apply to the images

    .MakeItround{
     border-radius: 50%;
}

This is the updated fiddle:http://jsfiddle.net/qvco2Ljy/122/

Look at my answer in this question from today: http://stackoverflow.com/a/40879138/5768908 — Gerardo Furtado, Nov 30 '16 at 07:14
Then i need to make another function , i was excepting there's some alternative way to edit my current codes — Anson Aştepta, Nov 30 '16 at 07:30
If you want the image to fill the circle's background, you'll have to use `defs`. — Gerardo Furtado, Nov 30 '16 at 07:33
How about all the way around use node.append("image") but change the shape of the image? — Anson Aştepta, Nov 30 '16 at 07:48
Yes, if you have a PNG with transparence around a central circular area, it can work. But doing this you cannot set the stroke color, width etc... — Gerardo Furtado, Nov 30 '16 at 07:56
I tried to use .classed() to assign some css(border-radius: 50%;) for those pictures, but it doesn't works to me why? — Anson Aştepta, Nov 30 '16 at 07:59
Please, don't ask additional questions in the comments. If you have additional problems, edit your question or post another question. — Gerardo Furtado, Nov 30 '16 at 08:05
SVG `image` tag doesn't support `border-radius`, you best bet is to create a pattern and fill a cirlce: http://stackoverflow.com/questions/11496734/add-a-background-image-png-to-a-svg-circle-shape — Mark, Nov 30 '16 at 14:08

D3: easiest way to insert images inside a circle

0 Answers0