d3 .data（）函数不能按预期工作多个数据源

Question

我有一个图表可以处理两个数据源，本质上第一个[updateSetupData（data）]构建图表需要的元素，第二个[update（数据） ]不会追加元素，只会更新由其他函数形成的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]; 
     }); 

    }); 

第二个函数是我遇到问题的地方。即使我调用.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会很好，因为看起来，当我对元素进行分类时，数据就在那里。

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; 
    }); 
};