D3 js V4 - 散點圖配置

Question

有人知道爲什麼圖中沒有顯示圓圈？

var winPercentageByMonth = [ 
    {"month":1, "winPercentage":20}, 
    {"month":2, "winPercentage":90}, 
    {"month":3, "winPercentage":20}, 
    {"month":4, "winPercentage":51}, 
    {"month":5, "winPercentage":15}, 
    {"month":6, "winPercentage":22}, 
    {"month":7, "winPercentage":9}, 
    {"month":8, "winPercentage":6}, 
    {"month":9, "winPercentage":23}, 
    {"month":10, "winPercentage":7}, 
    {"month":11, "winPercentage": 40}, 
    {"month":12, "winPercentage": 45}, 
    {"month":13, "winPercentage":20}, 
    {"month":14, "winPercentage":14}, 
    {"month":15, "winPercentage":3}, 
    {"month":16, "winPercentage":21}, 
    {"month":17, "winPercentage":15}, 
    {"month":18, "winPercentage":69}, 
    {"month":19, "winPercentage":9}, 
    {"month":20, "winPercentage":6}, 
    {"month":20, "winPercentage":110}, 
    {"month":21, "winPercentage":7}, 
    {"month":22, "winPercentage": 40}, 
    {"month":23, "winPercentage": 45}, 
    {"month":24, "winPercentage": 45} 

]; 


    var hs= 350; 
    var ws = 400; 



//create svg 
var svgs = d3.select("body").append("svg") 
    .attrs({ 
     width: ws, 
     height: hs 
    }); 


//creeate placeholder circles 
var circleMaker = svgs.selectAll("circle") 
    .data(winPercentageByMonth) 
    .enter() 
    .append("circle"); 


//give circles attributes 

var circleAttributes = circleMaker.attrs ({ 


     cx: function(d){ 
     return d.month*15; 
     }, 

     cy: function(d){ 
     return h-(d.winPercentage); 
     }, 

     r: function(d,i) { 
     return Math.sqrt(i.winPercentage); 
     }, 

     fill:function(d){ 
      if (d.winPercentage >10 & d.month > 5){ 
       return "#B82E00"; 
      } 
      else{ 
       return "#B88A00"; 
      }; 
     } 

}); 

Answer 1

您首先必須確保您正在加載/需要/導入d3-selection-multi腳本。有關詳細說明，請參閱this其他答案。

一旦完成，只需檢查控制檯中的錯誤，它會讓你解決你的問題，即調整你的屬性定義，因爲你有一些錯誤。

cy: function(d){ 
    return hs-(d.winPercentage); // <= notice the `h` variable is now `hs`, h is undefined 
    }, 

    r: function(d,i) { 
    return Math.sqrt(d.winPercentage); // <= pass the data (`d`), not the index (`i`) 
    }, 

工作bin與上述更正。