D3ローカルデータを更新し、更新時にパイを再描画します

Question

D3円グラフを作成し、プレーヤーとスコアを合計得点のパーセントとして表示する必要があります。データは私がplayerScoreをインクリメントし、それに応じて、チャートを更新しようとしています私のスクリプトを通じて、次のようになりますplayersObjという配列...

var playersObj = [ 
    {"playerName":"Jessica Jones","playerID":157,"playerScore":2}, 
    {"playerName":"Luke Cage","playerID":158,"playerScore":0}, 
    {"playerName":"Matt Murdock","playerID":159,"playerScore":6} 
] 

をクリックする上で構築され、更新されます。ここでは、この結果として、私は2つの問題を持つチャートを得る

/* 
---------------------------------------------------------------------- 
DONUT CHART 
---------------------------------------------------------------------- 
*/ 

//Set color range 
var color = d3.scale.ordinal() 
    .range(["red", "green", "blue", "purple", "orange"]); 

//Set stage dimensions 
var width = 300; 
var height = 300; 
var radius = Math.min(width, height)/2; 

//Select div and add svg into it 
var svg = d3.select("#donut").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var group = svg.append("g") 
    .attr("transform", "translate(" + radius + "," + radius + ")") 

//Set inner and outer radius of chart 
var arc = d3.svg.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(radius - 75); 


//UPDATE THE DONUT 

function updateDonut(){ 
    console.log("Updating donut..."); 
    //console.log(donutData); 

    //Create pie chart 
    var pie = d3.layout.pie() 
     .value(function(d) { 
     return d.playersScore; 
     }); 

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

    console.log(pie(playersObj)); 

    arcs.append("path") 
     .attr("d", arc) 
     .attr("fill", function(d) { 
     //console.log(d); 
     return color(d.data.playerName); 
     }); 

    arcs.append("text") 
     .attr("transform", function(d) { 
     return "translate(" + arc.centroid(d) + ")"; 
     }) 
     .text(function(d) { 
     return d.data.firstName+": "+d.data.playersScore 
     }); 

} 

...私は詳細を設定して、データが更新されると、それを描画しようとするところ、私はこれまで持っているコードです。最初に、chartはplayerScoreが0のエントリにテキストを追加します。誰もが0で始まる方法を見ると、パイのスライスに値がないため、多数の名前が重なって表示されます。第2の問題は、第2の更新後にパイが更新されないことである。 playersObjが更新され、console.log(pie(playersObj));に正しい値が表示されますが、グラフの表示は変更されません。

私はリンゴのBostockの例を見てきましたが、それはデータを変更しています。単に更新して再描画するだけです。他の投稿はさまざまなアプローチを取っているようですので、私のソリューションがどのように機能するのか混乱しています。

Answer 1

したがって、最も重要な問題は、変数名のスペルが間違っていたことです。私は、私が見つけた問題の大部分を解決しましたが、一部は意見がありました。私はこれが役立つことを願っています

var playersObj = [{ 
 
    "playerName": "Jessica Jones", 
 
    "playerID": 157, 
 
    "playerScore": 3 
 
}, { 
 
    "playerName": "Luke Cage", 
 
    "playerID": 158, 
 
    "playerScore": 2 
 
}, { 
 
    "playerName": "Matt Murdock", 
 
    "playerID": 159, 
 
    "playerScore": 6 
 
}, { 
 
    "playerName": "Oliver Queen", 
 
    "playerID": 160, 
 
    "playerScore": 10 
 
}, { 
 
    "playerName": "Barry Allen", 
 
    "playerID": 161, 
 
    "playerScore": 3 
 
}]; 
 

 
var domain = playersObj.map(function(m) { 
 
    return m.playerID; 
 
}); 
 

 
//Set color range 
 
var color = d3.scale.category10(); 
 
// var color = d3.scale.ordinal() 
 
// .range(["red", "green", "blue", "purple", "orange"]); 
 

 
//Set stage dimensions 
 
var width = 300; 
 
var height = 300; 
 
var radius = Math.min(width, height)/2; 
 

 
//Select div and add svg into it 
 
var svg = d3.select("#donut").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 

 
var group = svg.append("g") 
 
    .attr("transform", "translate(" + radius + "," + radius + ")") 
 

 
//Set inner and outer radius of chart 
 
var arc = d3.svg.arc() 
 
    .outerRadius(radius - 10) 
 
    .innerRadius(radius - 75); 
 

 
function updateDonut() { 
 
    console.log("Updating donut..."); 
 
    //console.log(donutData); 
 

 
    //Create pie chart 
 
    var pie = d3.layout.pie() 
 
    .value(function(d) { 
 
     return d.playerScore; 
 
    }); 
 

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

 
    console.log(pie(playersObj)); 
 

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

 
    text.append("text") 
 
    .attr("style", "text-anchor:middle") 
 
    .attr("transform", function(d) { 
 
     return "translate(" + arc.centroid(d) + ")"; 
 
    }) 
 
    .text(function(d) { 
 
     return d.data.playerName + ": " + d.data.playerScore 
 
    }); 
 

 
} 
 

 
updateDonut();

body { 
 
    background-color: #404040; 
 
} 
 
li, 
 
text { 
 
    font-family: arial; 
 
    font-size: 0.8rem; 
 
    color: white; 
 
    fill: white; 
 
} 
 
#donut { 
 
    padding: 2rem; 
 
} 
 
svg { 
 
    overflow: visible; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<ul> 
 
    <li>Your `playersObj` shows `playerScore` (singular) while you text elements value assignment references `playersScore` (plural). 
 
    </li> 
 
    <li>You also referenced `firstName` in the text element, which doesn't exist in `playersObj`. 
 
    </li> 
 
    <li> 
 
    `Luke Cage` could not be seen because his `playerScore` was 0. 
 
    </li> 
 
    <li> 
 
    Add some padding to the svg container and let the overflow be visible. Lots of different ways to handle that... 
 
    </li> 
 
    <li> 
 
    Color scheme was a bit difficult to read too and the text elements should/could be centered. 
 
    </li> 
 
    <li> 
 
    After fixing the above, text was hidden behind each arc because the text was attached to the same g object as the arc. Attachment order makes the text below the next arc added to the pie. Attaching to separate g 'layers' from the enter selection solves 
 
    this. 
 
    </li> 
 
</ul> 
 
<div id='donut'></div>