D3.js - DOM 文本错误退出答案

【问题标题】：D3.js - DOM text exiting incorrectlyD3.js - DOM 文本错误退出
【发布时间】：2014-11-21 02:23:17
【问题描述】：

这是我的代码 - http://jsfiddle.net/kiniadit/dsmxtonL/

具体代码——

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 rects）按原样退出，但 svg 文本元素以一种奇怪的方式被删除 - 最后一个数据值（而不是第一个）被删除。

这段代码几乎是 Scott Murray 书中http://examples.oreilly.com/0636920026938/chapter_09/29_dynamic_labels.html 的精确副本，只是我使用常规数组而不是键值对象。

请让我知道我缺少什么。谢谢！

【问题讨论】：

默认情况下，.data() 将尝试通过索引将数据中的每个元素与选择中的每个元素进行匹配。因此，如果数据中的元素数量与选择中的元素数量相同，则不会创建 enter 或 exit 选择。
知道了。所以这就是作者使用密钥的原因。感谢您的澄清。

标签： javascript html svg d3.js bar-chart

【解决方案1】：

请注意，在您引用的示例中，数据连接使用key：

// Create bars
svg.selectAll("rect").data(dataset, key)

您可以很容易地创建密钥。以下示例可帮助您继续努力实现目标：

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

【讨论】：

【解决方案2】：

我认为您的 x 值和 y 值计算存在简单错误。我已通过更正一些 x 和 y 值计算来更新您的信息。没问题，你可以看看这里。

fiddle

为了清楚起见，我在你的例子中改变了一些风格，

.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

希望对您有所帮助。 :-D

【讨论】：