Question

以下是我正在尝试做的链接。我想将蓝色条纹翻转到男性面向相反的方向，然后我将正常填充女性侧面。这将创建龙卷风图表。我已经工作了几个小时，我无法弄明白。我正在使用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++

您可以看到我从图表上的展示位置中减去了男性的价值。这导致偏移“翻转”。然后，我对代码进行了一些修改，将女性图形放入图片中并正确标记它。

如有任何问题，请与我们联系。

以下证明

在JS中翻转轴上的形状

1 个答案: