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

Question

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

如何保持图像不旋转。 我访问了使用 d3.js 旋转时保持文本水平的链接。 但我无法解决这个问题。

这是我的小提琴。 https://jsfiddle.net/swc7uopf/

下面是我的代码

<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

您最常在其图层中向后旋转图像，看起来修改过的小提琴

我被修改了这个

    .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 个解决方案

解决方案1
1 2019-01-24 07:32:27

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

问题描述

1 个解决方案

解决方案1 1 2019-01-24 07:32:27

解决方案1
1 2019-01-24 07:32:27