D3 - 無法從csv獲得打包的圓圈工作

我無法使這個看似簡單的代碼工作。我有一個包含5行數據的csv文件，並試圖創建一個氣泡圖表！真的很感激，如果有人可以幫助！D3 - 無法從csv獲得打包的圓圈工作

<body> 
    <script type="text/javascript"> 


var diameter = 960, 
format = d3.format(",d"), 
color = d3.scale.category20c(); 

var bubble = d3.layout.pack() 
.sort(null) 
.size([diameter, diameter]) 
.padding(1.5); 

     var svg = d3.select("#svgid") 
        .append("svg") 
        .attr("width", diameter) 
        .attr("height", diameter) 
        .attr("class","bubble"); 


     //Data 
     //var dataset = [ 5, 10, 15, 20, 25 ]; 
     d3.text("http://bpgpuae.com/bil-rupeex.csv", function(csvData) { 

      var dataset = d3.csv.parse(csvData); 

var node = svg.selectAll(".node") 
.data(bubble.nodes(dataset)) 
.enter().append("g") 
    .attr("class", "node"); 
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

    node.append("title") 
    .text(function(d) { return d.scam + ": " + format(d.funds); }); 

    node.append("circle") 
    .attr("r", function(d) { return d.funds; }) 
    .style("fill", function(d) { return color(d.decade); }); 
}); 


    </script> 
</body>

和這裏的CSV文件：

decade,scam,funds 
2010s,NSEL scam,55 
2010s,Railway Iron-Ore freight scam,170 
2010s,Vodafone tax scam,110 
2010s,Odisha Mining scam,600 
2010s,DIAL Scam,1670 
2010s,Tamil Nadu Granite scam,160

來源

2014-05-03 user3599602

請同時包含您的csv文件。你可以將它粘貼到你的問題中，因爲它很小。 – VividD

的包佈局期待一個hierarchical data structure。因此，您必須相應地準備統一的CSV數據。

var data = { name: "decade", children: csvData }; 

var node = vis.data([data]).selectAll("circle") 
    .data(pack.nodes) 
    ...

這是一個工作PLUNK與您的數據和大部分原始邏輯。

來源

2014-05-03 21:39:27 FernOfTheAndes

謝謝！工作得很好！感謝幫助！ – user3599602

@ user3599602很高興幫助！請接受答案，使其官方:) – FernOfTheAndes

想補充說，這是我的工作，直到我改變我的CSV標題爲小寫。有點奇怪，或者我只是沒有閱讀那部分文檔！ – JonLim

D3 - 無法從csv獲得打包的圓圈工作

回答

相關問題