D3.js - DOM文本退出错误

这里是我的代码 - http://jsfiddle.net/kiniadit/dsmxtonL/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 rects）按照它们应该退出的方式退出，但svg文本元素以奇怪的方式被删除 - 最后一个数据值（而不是第一个）被删除。

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

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

来源

2014-11-21 user3588841

默认情况下，'.data（）'会尝试通过索引来匹配数据中的每个元素与选择中的每个元素。因此，如果数据中的元素数量与选择中的数量相同，则不会创建“enter”或“exit”选择。 – Wex 2014-11-21 06:37:02

明白了。这就是作者为什么使用密钥的原因。谢谢澄清。 – user3588841 2014-11-21 18:43:23

注意，在例子中，你引用了数据结合使用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);

来源

2014-11-21 06:35:35 Wex

我认为您的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

来源

2014-11-21 07:21:58

D3.js - DOM文本退出错误

回答

相关问题