Question

我正在制作d3.js图，当我单击图像时，组旋转，并且所单击的图像位于顶部。我有2个问题： 1.图像未正确对齐（不是主要问题） 2.当组旋转时，图像也会旋转。

如何保持图像不旋转。我访问了链接Keeping text horizontal while it's position is rotating with d3.js。但是我无法解决这个问题。

下面是我的代码

<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>

另外，我想知道是否有一种方法可以使每个图像沿着圆形路径单独旋转（如果创建了一个图像），因为这给了我更多的功能。

Answer 1

您最多将图像向后旋转，看modified fiddle

我对此进行了修改

    .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)+')';
    })

您还需要将图像翻译到其顶部中心...

如何阻止图像在d3.js图形中旋转？

1 个答案: