“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饼图时

回答

相关问题