d3 .data（）関数が複数のデータソースとして機能しない

Question

2つのデータソースで動作するチャートがあり、基本的に最初の[updateSetupData（data）]はチャートに必要な要素を構築し、2番目の[ ]は要素を追加しないので、他の関数によって形成されたhtmlのみを更新します。物事を同期させるためのキーとしてIDを使用します。

function updateSetupData(data) { 

    var countsByParent = d3.nest() 
     .key(function (d) { return d.parent + '_tbl'; }) 
     .key(function (d) { return d.SkillGroup + '_grp'; }) 
     //.key(node => node.AgtName) 
     //.rollup(function(leaves) { return leaves.length;}) 
     .entries(data); 


    var treeRoot = { 
     key: "root", 
     parent: null, 
     value: "100", 
     values: countsByParent }; 

    var root = d3.hierarchy(treeRoot, function (d) { return d.values; }) 
    .sum(function (d) { return d.value; }); 
    // .sort(function(a, b) { return b.value - a.value; }); 

    var nodes = pack(root); 

    //console.log(nodes); 

    var node = canvas.selectAll(".node") 
     .data(pack(root).descendants()) 
     .enter().append("g") 
     .attr("class", function (d) { 
      return d.data.key == null ? "node " + d.data.AgtName + " agent " : 
    "node " + d.data.key; 
     }) 
     .attr("id", function (d) { return d.data.AgtName + "a_" + d.data.AgtId + 
    "_s" + d.data.skillId + "_g" + d.data.groupId }) 
     .attr("transform", function (d) { return "translate(" + d.x + "," + d.y 
    + ")"; }) 
     .attr("fill", "steelblue") 
     .on("mouseover", function (d) { 
      highlight(d.label ? d.label : d.data.AgtName); 
     }).on("mouseout", function (d) { highlight(null); }); 

    function highlight(agtName) { 
     if (agtName == null) d3.selectAll(".node").classed("active", false); 
     else d3.selectAll(".node." + agtName).classed("active", true); 
    } 

    node.append("circle") 
     .attr("r", function (d) { return d.r; }) 
     // .attr("fill", "steelblue") 
     .attr("opacity", 0.25) 
     .attr("stroke", "#ADADAD") 
     .attr("stroke-width", "2"); 

    node 
    .append("svg:title").text(function (d) { return d.data.AgtName; }); 

    var arc = arcGenerator 
     .outerRadius(function (d, i) { return d.r; }) 
     .startAngle(0) 
     .endAngle(180); 

    node.append('defs') 
    .append('path') 
    .attr("id", function (d, i) { return "s" + i; }) 
    .attr("d", arc); 

    //.attr("d", function (d, i) { return getPathData(d.r); }); 

    node.append("text") 
     .attr("transform", "rotate(90)") 
     .attr("text-anchor", function (d) { return d.data.key == null ? "start" 
    : d.data.key.split("_") [1] === "tbl" ? "end" : "start"; }) 
     .append("textPath") 
     .attr("startOffset", '50%') 
     .attr("xlink:href", function (d, i) { return '#s' + i; }) 
     .attr("fill", function (d) { return d.data.key == null ? "none" : 
    d.data.key.split("_") [1] === "tbl" ? "blue" : "black"; }) 
     .text(function (d) { 
      return d.data.key == null ? "" : 
      d.data.key == "root" ? "" : d.data.key.split("_")[0]; 
     }); 

    }); 

2番目の機能は、問題が発生している場所です。 .data（）を呼び出して、新しい[異なる]データを使用して静的なチャート上でライブ呼び出しをオーバーレイするようにしても、 .data（data、key）の直後のクラス分けされた関数は正常に動作します。 （d）新しいデータがあります。

データ関数内の変数var（d）は他の関数からのものであるため、テキストを設定するデータは間違っています。

function update(data) { 

    var agent = canvas.selectAll(".node.agent") 
     //sets all elements to false for the class before the update 
     .classed("newCall", false) 
     .data(data, function (d) { 
      // the key is either an element id or an id from the data 
      var myId = d.id ? d.id : this.id; 
      // console.log("data key: " + d.id + " element id: " + this.id + " 
     new: " + d.newCall); 
      return myId; 
     }).classed("newCall", function (d) { 
      var f = d.newCall ? d.newCall : false; 
      //console.log(this.id + " " + f) 
      return f; 
     }) 

    var text = agent.selectAll(".newCall text") 
    .attr("transform", null) 
    .attr("startOffset", null) 
    .attr("xlink:href", null) 
    .attr("fill", function (d) { return "black"; }) 
    .attr("dx", function (d) { return -4;}) 
    .attr("dy", function (d) { return 4; }) 
    .text(function (d) { 
     console.log(d); 
     return "3"; 
    }); 

適切なデータを得るためにテキストvarと何かする必要がありますか？私は、エージェントvarの.dataを呼び出すので、テキストvarはOKであると考えていたので、要素をクラス化するとデータがそこにあるように見えます。

Answer 1

固定機能全体を含みます。まず、データとクラスがクリアされ、新しいデータが追加されます。 agent.newCallのテキスト要素は、関数の実行時に更新されます。

function update(data) { 

    var agent = canvas.selectAll(".node.agent"); 

    // clear call data 
    agent.select("text").text(""); 

    // sets all elements to false for the class before the update 
    agent.classed("newCall", false) 
     .data(data, function (d) { 
      // the key is either an element id or an id from the data 
      var myId = d.id ? d.id : this.id; 
      // console.log("data key: " + d.id + " element id: " + this.id + " new: " + d.newCall); 
      return myId; 
     }).classed("newCall", function (d) { 
      var f = d.newCall ? d.newCall : false; 
      //console.log(this.id + " " + f) 
      return f; 
     }) 

     agent 
      .select(".newCall text") 
      .attr("transform", null) 
      .style("text-anchor", "middle") 
      .attr("dy", function (d) { return 4; }) 
      .attr("fill", "black") 
      .style("font-size", function (d) { return Math.min(2 * d.r, (2 * d.r - 8)/this.getComputedTextLength() * 24) + "px"; }) 
      .text(function (d) { 
       var txt = d.Calls ? d.Calls.length > 0 ? d.Calls.length : "" : ""; 
       return txt; 
      }); 


    agent.enter().append("g") 
    .classed("newCall", function (d) { 

      return d.newCall ? d.newCall : false; 
     }); 

    agent.exit().classed("newCall", function (d) { 
     // console.log(d); 
     return false; 
    }); 
};