D3でon.clickイベントを使用してデータを更新する方法

Question

D3 v4でパックレイアウトを使用しています。私のcsv、 "funds"と "spend"の2つの値の間で円のサイズを切り替えたいとします。

これは円をスケールする働き：

rank(funds) 
rank(spend) 

on.clickイベントが円をスケーリングしないただしここで

d3.select("#funds") 
.on("click", function() { 
    return rank(funds); 
}); 

はデータ

https://plnkr.co/edit/vp3MuQZEU85cNI1KUlc5?p=info

とplunkerです

var diameter = 400 
 

 
var color = d3.scaleOrdinal() 
 
    .range(["#ff433d", "#ff8e8b", "#ffc6c4", "#5c42ab", "#9d8ecd", "#cec6e6"]) 
 

 
var pack = d3.pack() 
 
    .size([diameter, diameter]) 
 
    .padding(1.5) 
 

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

 
//DRAW CHART 
 

 
d3.csv("bil-rupeex.csv", function(data) { 
 

 
    var root = { name: "decade", children: data }; 
 
    
 
//UPDATE DATA 
 

 
    funds = d3.hierarchy(root) 
 
     .sum(function(d) { return d.funds }) 
 
     
 
    spend = d3.hierarchy(root) 
 
     .sum(function(d) { return d.spend }) 
 

 
    function rank(data) {  
 
    
 
    pack(data); 
 

 
    var node = vis.selectAll("circle") 
 
     .data(data.descendants()) 
 
     .enter().append("circle") 
 
     .attr("class", "node") 
 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 
 
     .attr("r", function(d) { return d.r; }) 
 
     .attr("fill", function(d) { 
 
     return color(d.data.scam); 
 
     }) 
 
    
 
    node.exit().remove(); 
 

 
    } 
 
    
 
    rank(funds); 
 
    
 

 
//BUTTONS 
 

 
    d3.select("#funds") 
 
    .on("click", function() { 
 
     return rank(funds); 
 
    }); 
 

 
    d3.select("#spend") 
 
    .on("click", function() { 
 
     return rank(spend); 
 
    }); 
 
    
 
    
 
})

Answer 1

クリックハンドラー内のすべての円を削除し、実際に参照を返すのではなく、ランク関数を実際に呼び出すようにしてください。

var diameter = 400 

var color = d3.scaleOrdinal() 
    .range(["#ff433d", "#ff8e8b", "#ffc6c4", "#5c42ab", "#9d8ecd", "#cec6e6"]) 

var pack = d3.pack() 
    .size([diameter, diameter]) 
    .padding(1.5) 

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

//DRAW CHART 

d3.csv("bil-rupeex.csv", function(data) { 

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

//UPDATE DATA 

    funds = d3.hierarchy(root) 
     .sum(function(d) { return d.funds }) 

    spend = d3.hierarchy(root) 
     .sum(function(d) { return d.spend }) 

    function rank(data) {  

    pack(data); 

    var node = vis.selectAll("circle") 
     .data(data.descendants()) 
     .enter().append("circle") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 
     .attr("r", function(d) { return d.r; }) 
     .attr("fill", function(d) { 
     return color(d.data.scam); 
     }) 

    node.exit().remove(); 

    } 

    rank(funds); 
    rank(spend); 


//BUTTONS 

    d3.select("#funds") 
    .on("click", function() { 

     vis.selectAll("circle").remove() 


     rank(funds); 
     console.log("funds") 

    }); 

    d3.select("#spend") 
    .on("click", function() { 

     vis.selectAll("circle").remove() 
     rank(spend); 


    }); 


}) 

フォークトplunkr：https://plnkr.co/edit/ky23JGZciJAA4LUK12If?p=preview