「TypeError：r爲null」創建d3餅圖時

我正在使用d3 v4。我試圖創建一個使用下面的代碼「TypeError：r爲null」創建d3餅圖時

var svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"), 
    radius = Math.min(width, height)/2, 
    g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var color = d3.scaleOrdinal(["#98abc5", 
       "#8a89a6", 
       "#7b6888", 
       "#6b486b", 
       "#a05d56", 
       "#d0743c", 
       "#ff8c00", 
       "#e34d01", 
       "#ccff05", 
       "#3e7eca", 
       "#aa0092", 
       "#b32e4f"]); 

var pie = d3.pie() 
    .sort(null) 
    .value(function(d) { return d.market_cap; }); 

var path = d3.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(0); 

var label = d3.arc() 
    .outerRadius(radius - 40) 
    .innerRadius(radius - 40); 

var csvData = "currency,market_cap"; 
csvData += "Ethereum,36536577384"; 
csvData += "Ripple,9562570727"; 
csvData += "Bitcoin Cash,10407237657"; 
csvData += "Litecoin,4537371026"; 
csvData += "NEM,2962953000"; 
csvData += "Dash,2903791940"; 
csvData += "IOTA,2289563023"; 
csvData += "Ethereum Classic,1955610226"; 
csvData += "NEO,1599450000"; 
csvData += "Monero,2170429814"; 
csvData += "Stratis,703350671"; 
csvData += "Bitcoin,80149315484"; 
var data = d3.csvParse(csvData); 
data.forEach(function(d) { 
    d.market_cap = +d.market_cap; 
    return d; 
}); 


    var arc = g.selectAll(".arc") 
    .data(pie(data)) 
    .enter().append("g") 
     .attr("class", "arc"); 

    arc.append("path") 
     .attr("d", path) 
     .attr("fill", function(d) { return color(d.data.currency); }); 

    arc.append("text") 
     .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) 
     .attr("dy", "0.35em") 
     .text(function(d) { return d.data.currency; });

我創建了一個演示在這裏簡單的餅圖 - https://jsfiddle.net/rgw12x8d/12/。然而，在運行代碼時，它會導致一個模糊的問題。這是什麼意思，但更重要的是，我該如何解決這個問題？

來源

2017-09-01 Dave

很奇怪，我得到了你的數據與換行符上的每一行本地畫（'\ N'）假csv，但小提琴錯誤來自第一對夫婦的線，d3.select（）由於某種原因沒有在這裏選擇任何東西，並且該腳本在嘗試獲取寬度時失敗：https://jsfiddle.net/v0L9vajy/ –

當用'節點爲空'代替d3 v4的非最小化版本，'r爲空'作爲錯誤，稍微隱蔽一點，但同樣令人困惑。 –

在你的JSFiddle中，d3.select沒有選擇任何東西，因爲你有load type: no wrap - in head，應該是load type: no wrap - in body。

除此之外，你「僞造」你的CSV的方式是錯誤的。您正在連接字符串，但不向它們添加換行符。一個簡單的替代方法是在運用template literals：

var csvData = `currency,market_cap 
Ethereum,36536577384 
Ripple,9562570727 
Bitcoin Cash,10407237657 
Litecoin,4537371026 
NEM,2962953000 
Dash,2903791940 
IOTA,2289563023 
Ethereum Classic,1955610226 
NEO,1599450000 
Monero,2170429814 
Stratis,703350671 
Bitcoin,80149315484`;

這裏是更新的小提琴：https://jsfiddle.net/n3xrbnzj/

來源

2017-09-01 23:36:51

啊，我被困在'd3.select'部分，很好的答案 –

「TypeError：r爲null」創建d3餅圖時

回答

相關問題