在 JS 中翻转形状过轴

Question

这是我正在尝试做的 link。我想翻转蓝色条以在男性侧面向相反的方向然后我将像往常一样填充女性侧。这将创建一个龙卷风图表。我已经为此工作了几个小时，但我无法弄清楚。我正在使用 Raphael JS。

http://math.mercyhurst.edu/~cmihna/DataViz/Butterfly.html

Answer 1

刚刚审查完您网站的源代码。不需要转换，或任何类似的东西。只需将一些简单的数学添加到生成 for 循环的图形中。

您的代码如下

ind = 0
        for (var key in gender) {   // loop over all possible gender
            for ( var i = 0; i < people.length; i++ ) { // loop over people
                if (people[i][key] != 0) { 



                    var barmale = paper.rect((w+leftPadding-rightPadding)/2,topPadding + vs*0 + i*vs, people[i][key],vs)
                    barmale.attr({'fill': '#0000A0', 'stroke-width':1})


                    var barfemale = paper.rect((w+leftPadding-rightPadding)/2, topPadding + vs*0 + i*vs, people2[i][key],-vs)
                    barfemale.attr({'fill': '#FFC0CB', 'stroke-width':1})

                    barmale.scale(1,-1)

                    //var dp = paper.circle(leftPadding + ind*hs + 0.5*hs, topPadding + vs*0.5 + i*vs, people[i][key])
                    //dp.attr({ 'fill': colors[ind] })
                    barmale.id = people[i][key] + " " + gender[key] + " people in this age range"
                    barmale.hover(hoverStart, hoverEnd)

                    barfemale.id = people[i][key] + " " + gender[key] + " people in this age range"
                    barfemale.hover(hoverStart, hoverEnd)


                }
            }
            ind++

下面是我的代码

ind = 0
for (var key in gender) {   // loop over all possible gender
    for ( var i = 0; i < people.length; i++ ) { // loop over people
        if (people[i][key] != 0) { 



            var barmale = paper.rect((w+leftPadding-rightPadding)/2 - people[i][key],topPadding + vs*0 + i*vs, people[i][key],vs)
            barmale.attr({'fill': '#0000A0', 'stroke-width':1})


            var barfemale = paper.rect((w+leftPadding-rightPadding)/2, topPadding + vs*0 + i*vs, people2[i][key],vs)
            barfemale.attr({'fill': '#FFC0CB', 'stroke-width':1})

            barmale.scale(1,-1)

            //var dp = paper.circle(leftPadding + ind*hs + 0.5*hs, topPadding + vs*0.5 + i*vs, people[i][key])
            //dp.attr({ 'fill': colors[ind] })
            barmale.id = people[i][key] + " " + gender[key] + " people in this age range"
            barmale.hover(hoverStart, hoverEnd)

            barfemale.id = people2[i][key] + " " + gender[key] + " people in this age range"
            barfemale.hover(hoverStart, hoverEnd)


        }
    }
    ind++

你可以看到我从图表上的位置减去男性的值。这会导致偏移 "flip"。然后，我又修改了代码，将女性图形带入图片并正确标记它。

如有任何问题，请告诉我。

证明如下

在 JS 中翻转形状过轴

Flipping Shape Over Axis in JS

javascript

raphael