在JS中翻轉軸的形狀

Question

這裏是我想要做的事情的鏈接。我想翻轉藍色的酒吧在男性方面面對相反的方式，然後我會填寫正常的女性方。這將創建龍捲風圖表。我一直在這個工作幾個小時，我無法弄清楚。我正在使用Raphael JS。

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

Answer 1

剛剛畢業審覈您的網站的源代碼。沒有必要進行轉換，或者其他類似的東西。只需將一些簡單的數學運算添加到您的圖形中即可生成for-loop。

你下面

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

你可以看到，我從圖上的位置減去男性的價值。這會導致偏移量「翻轉」。然後，我修改了一些代碼，將女性圖形添加到圖片中並正確標記它。

如果有任何問題，請讓我知道。

證明下面