Javascript D3.js-DOM文本错误退出

这是我的密码-

特定代码-

var labels = svg.selectAll("text").data(dataset)
                    //Enter…
                      labels.enter()
                        .append("text")
                        .text(function(d) {
                            return d;
                        })
                        .attr("text-anchor", "middle")
                        .attr("x", w)
                        .attr("y", function(d) {
                            return h - yScale(d) + 14;
                        })
                       .attr("font-family", "sans-serif")
                       .attr("font-size", "11px")
                       .attr("fill", "black");

                    //Update…
            labels
              .attr("x", function(d, i) {
                return xScale(i) + xScale.rangeBand() / 2;
              });

            //Exit…
            labels.exit()
              .remove();

单击“删除数据值”段落时，无法正确删除svg文本元素。其他DOM元素（svg矩形）按预期方式退出，但svg文本元素以一种奇怪的方式被删除——最后一个数据值（而不是第一个）被删除

这段代码几乎与Scott Murray的书完全相同，只是我使用了一个常规数组而不是键值对象

---

请让我知道我错过了什么。谢谢

注意，在您引用的示例中，数据联接使用的是：

您可以非常轻松地创建密钥。以下是一个示例，可以帮助您实现您的目标：

var length = dataset.length;

var key = function (d) { return d; };

var computeJoin = function() { 
  return svg.selectAll('rect').data(dataset, key);
}

var shiftDataset = function() {
  dataset.shift() 
  newItem.index = length; /* this index is unique */
  dataset.push(newItem)
  length = dataset.length; /* keep the length up to date */
}

var update = function() {
  labels = computeJoin(); /* join */

  /* enter, update, etc... */

  /* shift the data */
  shiftDataset()
  labels = join(dataset);
  labels.exit().remove();
}

/* init */
for (var i = 0; i < length; i++) {
  dataset[i].index = i;
}

/* update every 2000ms */
var DELAY = 2000;
setInterval( update, DELAY );

var length=dataset.length；
var key=函数（d）{返回d；}；
var computeJoin=函数（）{
返回svg.selectAll（'rect'）.data（数据集，键）；
}
var shiftDataset=函数（）{
dataset.shift（）
newItem.index=length；/*此索引是唯一的*/
dataset.push（newItem）
length=dataset.length；/*使长度保持最新*/
}
var update=函数（）{
labels=computeJoin（）；/*join*/
/*输入、更新等*/
/*转移数据*/
移位数据集（）
标签=连接（数据集）；
labels.exit（）.remove（）；
}
/*初始化*/
对于（变量i=0；i

我认为您的x值和y值计算有一个简单的错误。 我已通过更正一些x和y值计算来更新您的。 它工作正常，你可以看看这里

为了说明这一点，我改变了你例子中的一些风格

.attr("fill", "black"); //update text label color to black
...
dataset[i] = Math.floor(Math.random()*100) + 14; // add 14 here as minum height of bars    

---

希望有帮助-默认情况下，

.data（）

将尝试将数据中的每个元素与按索引选择的每个元素相匹配。因此，如果数据中的元素数与选择中的元素数相同，则不会创建

enter

或

exit

选择。明白了。这就是作者使用密钥的原因。谢谢你的澄清。

.attr("fill", "black"); //update text label color to black
...
dataset[i] = Math.floor(Math.random()*100) + 14; // add 14 here as minum height of bars