How to stop images from rotating in d3.js graph?

Question

I am making a d3.js graph where when i click on a image the group rotates and the clicked image comes on top. I am having 2 problems: 1. The images are not properly aligned (not a major issue) 2. Images also rotates when group rotates.

How to keep images unrotated. I visited the link Keeping text horizontal while it's position is rotating with d3.js. But i was unable to resolve this issue.

This is my fiddle. https://jsfiddle.net/swc7uopf/

Below is my code

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class = "graphs" id="circular"></div>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script>

    function circular_chart(data){
        var width = 500;
        var height = 500;
        var length = 0
        function circle(selection){
            selection.each(function(){
                svg = d3.select(this)
                        .append('svg')
                        .attr('width',width)
                        .attr('height',height)
                        .append('g')
                        .attr('transform','translate(' + width/2+ ','+height/2 + ')')
                        .append('g');

                circle = svg.append('circle')
                            .attr('cx',0)
                            .attr('cy',0)
                            .attr('r',200)
                            .style('fill','none')
                            .style('stroke','black');

                var chairOriginX = 0 + ((250) * Math.sin(0));
                var chairOriginY = 0 - ((250) * Math.cos(0));

                length = data.length;
                function position_x(d,i){
                    radius = 200
                    angle = (i / (data.length/2)) * Math.PI; 
                    x = (radius * Math.sin(angle));
                    y = (-radius * Math.cos(angle));
                    return x
                }
                function position_y(d,i){
                    radius = 200
                    angle = (i / (data.length/2)) * Math.PI; 
                    x = (radius * Math.sin(angle));
                    y = (-radius * Math.cos(angle));
                    // nodes.push({'id': i, 'x': x, 'y': y});
                    return y
                }
                images = svg.selectAll('image')
                            .data(data)
                            .enter()
                            .append('svg:image')
                            .attr('xlink:href',function(d){return d.Image_Url})
                            .attr('x',function(d,i){return position_x(d,i)})
                            .attr('y',function(d,i){return position_y(d,i)})
                            .attr('width',50)
                            .attr('height',50)
                            .attr('id',function(d,i){return i});



                images.on('click',function(d){
                    // debugger;
                    angle = -(360*this.id)/(data.length);
                    svg.transition().duration(2000).attr('transform','rotate('+angle+',0,0)')
                    images.attr('transition','rotate('+angle+',0,0)')
                })

            });
        }
        return circle;
    }
    data = [{"Image_Url":'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Jnehru.jpg/800px-Jnehru.jpg'},
    {"Image_Url":'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Jnehru.jpg/800px-Jnehru.jpg'},
    {"Image_Url":'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Jnehru.jpg/800px-Jnehru.jpg'},
    {"Image_Url":'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Jnehru.jpg/800px-Jnehru.jpg'},
    {"Image_Url":'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Jnehru.jpg/800px-Jnehru.jpg'},
    {"Image_Url":'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Jnehru.jpg/800px-Jnehru.jpg'},
    {"Image_Url":'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Jnehru.jpg/800px-Jnehru.jpg'},
    {"Image_Url":'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Jnehru.jpg/800px-Jnehru.jpg'},
    {"Image_Url":'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Jnehru.jpg/800px-Jnehru.jpg'},
    {"Image_Url":'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Jnehru.jpg/800px-Jnehru.jpg'},
    {"Image_Url":'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Jnehru.jpg/800px-Jnehru.jpg'}]

        cir = circular_chart(data)
        d3.select('#circular').call(cir)

</script>

Also, i would like to know is there a way by which i can individually rotate each image along circular path (if i create one) because this gives me much more functionality.

you already slove your problem? :) – Stranger in the Q Jul 10 '19 at 08:44 — Stranger in the Q, Jul 10 '19 at 08:44

score 1 · Answer 1 · answered Jan 24 '19 at 07:32

1

You most rotate images backward in its layer, look modified fiddle

i was modified this

    .attr('x',function(d,i){return d.x = position_x(d,i)})
    .attr('y',function(d,i){return d.y = position_y(d,i)})
    .attr('transform',function(d,i){
         return 'rotate ('+((i/(data.length/2))*180)+' '+(d.x)+' '+(d.y)+')';
    })

also you need translate images to its top-centers...

answered Jan 24 '19 at 07:32

Stranger in the Q

3,668
2
21
26

I want the image to remain top to down only. I don't want images to rotate. Please help me with that @Stranger – Shubham Sharma Jan 24 '19 at 12:45
@ShubhamSharma if you want something like this https://jsfiddle.net/4w7pn2a1/ you dont need to rotate anything.. you just want to images follow the circle path without rotation? – Stranger in the Q Jan 24 '19 at 13:05
Yes that's exactly what i want. It looks pretty good with animation you did. But problem is that i don't what the animation radius to change, i want ciruclar animation which moves along one radius. – Shubham Sharma Jan 24 '19 at 13:09
why is the radius changing during transition. Will it be solved by attrTween? – Shubham Sharma Jan 24 '19 at 13:16
@ShubhamSharma i manually set roration origin, seems like it need to be more accurately calculated – Stranger in the Q Jan 24 '19 at 13:22
But the images are going out and coming in when rotating.For this i think we need interpolateString. – Shubham Sharma Jan 24 '19 at 13:39
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187268/discussion-between-shubham-sharma-and-stranger-in-the-q). – Shubham Sharma Jan 24 '19 at 14:59

How to stop images from rotating in d3.js graph?

1 Answers1