D3.js 转换多行 - 数据不更新

Question

我试图在过滤数据时更新我的多线图。但是，当轴按预期过渡时，我的线条会更新为未过滤的旧数据；导致它超出图表区域。我的问题似乎是过渡部分，但我似乎无法弄清楚。

当 y 轴保持不变时，我有工作示例，但不是这种类型的变化数据。我认为我可以删除所有旧路径，但据我所知，只要我们不需要添加更多行，我应该能够更新？

这是一个有效的 jsFiddle，而不是旧的代码。这是一个比我之前发布的代码更简单的图表，但基本问题是相同的。行不更新。

测试代码：

$('input[type=button]').click( function() {

Arr1 = [{Antal:3000,Datum:parseDate("2008-03-30")},{Antal:2000,Datum:parseDate("2008-06-30")}];
Arr2 = [{Antal:5000,Datum:parseDate("2008-03-30")},{Antal:8300,Datum:parseDate("2008-06-30")}];

data = Arr1.concat(Arr2)
dsMainArr = [{name: "primary",values:Arr1},{name: "specialist",values:Arr2}];


 // redraw the line
    city
    .attr("d", line)
    .attr("transform", null);

    //update x domain for axis labels
    y.domain([
        d3.min(dsMainArr, function(c) { return d3.min(c.values, function(v) { return v.Antal; }); }),
        d3.max(dsMainArr, function(c) { return d3.max(c.values, function(v) { return v.Antal; }); })
      ]);


    //slide xAxis       
   svg.select(".y.axis")
            .transition()
            .duration(300)
            .ease("linear")
            .call(yAxis);

    //slide the line to the left 
    city.transition()
    .duration(500)
    .ease("linear")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.name); });

});

http://jsfiddle.net/1x0k3Lzd/34/

知道哪里出了问题吗？

Answer 1

而不是

city
.attr("d", line)
.attr("transform", null);

和

 city.transition()
   .duration(500)
   .ease("linear")
   .attr("d", function(d) { return line(d.values); })
   .style("stroke", function(d) { return color(d.name); });

你需要这样的东西

city
.data(dsMainArr)
.select('.line')
.transition()
.duration(500)
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });

您需要再次包含 data(dsMainArr)，因为您已经在本地重新定义了 dsMainArr。

顺便说一句，注意

d3.select('input[type=button]').on("click", function(){})

作为

发挥作用

$('input[type=button]').click(function(){})

这是更新后的 jsfiddle 的 link：http://jsfiddle.net/47xnn07h/2/

D3.js 转换多行 - 数据不更新

D3.js transition multiple lines - data doesn't update

javascript

transition

d3.js