d3 .data() 函数未按预期工作多个数据源

Question

我有一个图表可以处理两个数据源，基本上第一个 [updateSetupData(data)] 构建图表所需的元素，第二个 [update(data)] 不附加元素它只更新由其他功能。我使用 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 text 变量(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";
     });

我需要对 text 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;
    });
};