数据与d3.stack.layout()连接

问题描述

我创建了一个 plunk 来演示我的问题.

I've created a plunk to demonstrate my problem.

问题是我的.enter()，update()，exit()方法不适用于d3.chart.layout()可视化.

The issue is that my .enter(),update(),exit() method is not working for my d3.chart.layout() visualization.

相反，我遇到了经典的双重职位"问题.我的键是一样的.

Instead, I get the classic "double post" problem. My keys are the same, however.

我要发生的事情是让我的d3蒸汽图更新其数据(以使y值全部变为0，并且图表消失).我的数据绑定编码正常:

What I want to happen is for my d3 steam graph to update its data (such that the y values all go to 0, and the chart disappears). My data binding is coded normally:

var steam = svg.selectAll(".layer")
    .data(layers, function(d){console.log(d); return d.key})

steam.enter().append("path")

steam.style("fill", function(d, i) { return z(i); }).style("opacity","0").transition().duration(400)
    .style("opacity","1")
    .attr("class", "layer")
    .attr("d", function(d) { return area(d.values); })

steam.exit().transition().duration(500).remove()

正在发生什么/任何想法?

What is happening/any ideas?

推荐答案

所以我使它起作用了，尽管我仍然对其为何如此工作感到困惑.我需要将svg添加项移出update函数，并移至名称空间中(显而易见).

So I got it to work, though I'm still confused as to why it works this way. I needed to move the svg adding out of the update function and into the namespace (that was obvious).

但是更新是通过transition()方法实现的.谁能帮助我了解我哪里出了问题?

But the update became this, with a transition() method. Can anyone help me understand where I went wrong?

  test = svg.selectAll("path").data(layers, function(d){return d.key})

      test.enter().append("path")

      test.style("opacity",1).style("fill", function(d, i) { return z(i); })
        .attr("class", "layer").transition()
      .duration(2000)
        .attr("d", function(d) { return area(d.values); });

      test.exit().transition().duration(1500).style("opacity",0).remove();

这篇关于数据与d3.stack.layout()连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！