"TypeError: r is null" lors de la création du diagramme à secteurs d3

J'utilise d3 v4. Je suis en train de créer un graphique circulaire simple en utilisant le code ci-dessous"TypeError: r is null" lors de la création du diagramme à secteurs 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; });

J'ai créé une démo ici - https://jsfiddle.net/rgw12x8d/12/. Cependant, lors de l'exécution du code, il en résulte un cryptique

TypeError: r is null

Qu'est-ce que cela signifie, mais plus important encore, comment puis-je le résoudre?

Source

2017-09-01 Dave

Très bizarre, je suis arrivé à vos données pour tirer localement avec un saut de ligne ('\ n') sur chaque ligne de la faux csv, mais l'erreur de violon vient des deux premières lignes, d3.select() ne sélectionne rien ici pour une raison quelconque, et le script échoue en essayant d'obtenir la largeur: https://jsfiddle.net/v0L9vajy/ –

Quand en substituant la version non minimisée de d3 v4, 'r is null' est remplacé par' node is null' en tant qu'erreur, un peu moins cryptique, mais pas moins énigmatique. –

Dans votre JSFiddle, d3.select ne sélectionne rien parce que vous avez load type: no wrap - in head, alors que ce devrait être load type: no wrap - in body. En plus de cela, la façon dont vous "simulez" votre CSV est fausse. Vous concaténez des chaînes, mais sans ajouter de saut de ligne. Une alternative plus simple est juste en utilisant 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`;

Voici le violon mis à jour: https://jsfiddle.net/n3xrbnzj/

Source

2017-09-01 23:36:51

Ah, j'ai été perplexe sur la partie 'd3.select', belle réponse –

"TypeError: r is null" lors de la création du diagramme à secteurs d3

Répondre

Questions connexes