D3错误地追加对数据更新DOM元素

我tryng使用D3和他进入/退出方式来更新我的吧虎视眈眈在这里你可以看到目前的结果 http://jsfiddle.net/k8sftbez/D3错误地追加对数据更新DOM元素

的想法是，我应该有创建

<g> 
    <rect></rect> 
    <text></text> 
</g>

中的图形aspected但我的问题是，当我尝试更新指示条的颜色（我做它在鼠标悬停），而是：用一个矩形，并为每个数据对象属性的文本，如股份公司elemennt更新当前rect和文本标签，它会在每次更新时附加2个新标签。上，您可以看到问题（http://jsfiddle.net/k8sftbez/）

来源

2015-04-02 Jurgo Boemo

你添加文字/每rects徘徊，你应该只拨动它们。看到这里：http://jsfiddle.net/k8sftbez/1/：当你停留在文本上方时，文本看起来更加大胆。它是因为你把文本层放在另一个文本层上每个悬停的另一个文本层 – 2015-04-02 14:24:11

是的，这个问题我是triyng解决 – 2015-04-08 10:18:54

最后，我已修复更新这样的功能： http://jsfiddle.net/5ft6uL6k/

我认为是更优雅的方式，使用的地方持有者并更新它们。

基本上这部分：

var bar = chart.selectAll("g").data(data) 
bar.enter().append("g").attr("transform", function(d, i) { 
    return "translate(0," + i * barHeight + ")"; 
}) 

var valueBar = bar.append("rect"); 
valueBar 
    .attr(valueBarValues.attr) 
    .attr("width", function(d){return x(d.value)}) 
    .style(valueBarValues.style); 

bar.append("text") 
    .attr(textConfig.attrs) 
    .style(textConfig.style) 
    .text(function(d) { return d.name; }) 

bar.exit().remove();

改变这样的：

var bar = chart.selectAll("g").data(data) 
    var barEnter = bar.enter().append("g"); 

    barEnter.attr("transform", function(d, i) { 
     return "translate(0," + i * barHeight + ")"; 
    }); 

    barEnter.append("rect"); 
    barEnter.append("text"); 

    var textBar = bar.selectAll("text") 
    textBar 
     .attr(textConfig.attrs) 
     .style(textConfig.style) 
     .text(function(d) { return d.name; }) 

    var valueBar = bar.selectAll("rect"); 
    valueBar 
    .attr(valueBarValues.attr) 
    .attr("width", function(d){return x(d.value)}) 
    .style(valueBarValues.style); 

    bar.exit().remove();

来源

2015-04-08 10:24:45

，那是因为你的更新功能实际上包括酒吧的创作为好，为了让他们只是改变你应该有两个单独的功能，一个是颜色的例子附加的对象，和一个更新（例如，你可以有一个函数，附加矩形没有任何属性和更新功能，他们的风格）

来源

2015-04-02 14:26:14 tomtomtom

我真的是d3的noob，但据我了解，.enter（）只返回差异和.remove（）应该删除旧的。所以我期待更新函数也可以作为init函数，我错了吗？ – 2015-04-07 11:13:59

你能否详细介绍一下你的回应？ – 2015-04-07 11:15:00

假设你有一部分直到在主要事物中添加矩形，然后创建一个名为updateRect的函数，您可以在其中选择矩形并应用属性（如果需要，可以使用cx，cy width height和fill或stroke）以及然后在追加后以及矩形应该改变的情况下调用该函数 – tomtomtom 2015-04-07 22:45:08

D3错误地追加对数据更新DOM元素

回答

相关问题