D3 v4の更新パターンを使用してネストされた子ノードを更新する方法

Question

D3 v4更新パターンを使用するときに、特定の子孫にデータを更新させるのに問題があります。

データ結合に変更を加えて子に伝播する適切な方法は何ですか？ここで

あなたは、ボタン、テキストのみの変更ではなく、テキストやrectsの色の両方をクリックしてください例 https://bl.ocks.org/yanofsky/5b30b12582b6b66bc262b165806a6dc5

です。

Answer 1

追加する要素ごとにデータを追加するパターンに従ってください。この方法では、常にupdate,enterおよびexitの選択肢があります。 exitを削除してenterのための新しい要素を追加した後、あなたはupdateとenterをマージし、属性を更新することができます。このため

Here is the updated block

//define some data 
var data = [ 
     {"location": 1, "month": "Jan", "year": 2017, "value": "#ccc"}, 
     {"location": 2, "month": "Jan", "year": 2017, "value": "#999"}, 
     {"location": 3, "month": "Jan", "year": 2017, "value": "#666"}, 
     {"location": 4, "month": "Jan", "year": 2017, "value": "#333"}, 
     {"location": 1, "month": "Jan", "year": 2018, "value": "#fcc"}, 
     {"location": 2, "month": "Jan", "year": 2018, "value": "#f99"}, 
     {"location": 3, "month": "Jan", "year": 2018, "value": "#f66"}, 
    {"location": 4, "month": "Jan", "year": 2018, "value": "#f33"}, 
     {"location": 1, "month": "Feb", "year": 2017, "value": "#cfc"}, 
     {"location": 2, "month": "Feb", "year": 2017, "value": "#9f9"}, 
     {"location": 3, "month": "Feb", "year": 2017, "value": "#6f6"}, 
     {"location": 4, "month": "Feb", "year": 2017, "value": "#3f3"}, 
     {"location": 1, "month": "Feb", "year": 2018, "value": "#ccf"}, 
     {"location": 2, "month": "Feb", "year": 2018, "value": "#99f"}, 
     {"location": 3, "month": "Feb", "year": 2018, "value": "#66f"}, 
     {"location": 4, "month": "Feb", "year": 2018, "value": "#33f"}, 
    {"location": 5, "month": "Feb", "year": 2018, "value": "#0505ff"}, 
    ] 

// nest the data by month then year 
var by_month = d3.nest() 
     .key(function(d){return d.month}) 
     .key(function(d){return d.year}) 
     .entries(data) 


function render(ident, key_month) { 

    var w = 500 
    var h = 100 

    var container = d3.select(ident) 

    // select and add a container div for each year in the data 
    // using only the data for the target month 
    var year = container 
     .selectAll("div.year") 

    var data = by_month.filter(function(d){return d.key == key_month})[0].values; 
    var yearAll= year.data(data); 


    yearAll.exit().remove(); 


    var yearEnter= yearAll 
     .enter() 
    .append("div") 
    .classed("year",true); 

    //Add h2 and svg 
    yearEnter.append("h2"); 
    yearEnter.append("svg") 
        .append("g") 
        .classed("gwrapper",true); 

    yearEnter = yearEnter.merge(yearAll); 

    yearEnter.select("h2") 
    .text(function(d) {return d.values[0].month + " " + d.values[0].year ;}); 

    // update the svg dimensions 
    yearEnter.select("svg") 
    .attr("width", w) 
     .attr("height", h); 


    // select and add element g location 
    var gloc = yearEnter.select(".gwrapper").selectAll("g") 
              .data(function(d){return d.values;}); 

    gloc.exit().remove(); 


    var glocEnter = gloc.enter() 
             .append("g") 
         .classed("loc",true); 

    glocEnter.append("rect"); 
      ; 

    glocEnter = glocEnter.merge(gloc); 


    // merge and position element wrappers 
    glocEnter 
     .attr("transform", function(d,i){return "translate("+[w/5*i]+")"}); 

    var t = d3.transition().duration(1000); 

    glocEnter.select("rect") 
      .attr("x", (w/5 - 5)/2) 
           .attr("y", (w/5 - 5)/2) 
           .attr("width", 0) 
            .attr("height", 0) 
           .attr("fill", "black") 
           .transition(t) 
           .attr("x", 5) 
           .attr("y", 0) 
            .attr("width", w/5 - 5) 
            .attr("height", w/5 - 5) 
           .attr("fill", function(d){return d.value}); 

} 

// on button click change the subset of data being used 
d3.selectAll(".month").on("click", function(){ 
    render("#toggle",this.getAttribute("data-month")) 
}) 


d3.selectAll("#clearb").on("click", function(){ 
    d3.selectAll("g.loc").remove(); 
}) 

render("#toggle","Jan")