Question

我有一个多线图，可在用户点击按钮时更新。在某些更新中，数据完全不同，因此只退出这些行并添加新行，这些都是有效的。我正在尝试添加一个转换到退出/删除，以便删除更清晰。无论我做什么，我都无法在退出/移除工作中获得转换。我已经尝试延迟转换并将其设置为在更新转换完成时启动。

以下是更新函数中包含转换的代码：

//bind data 
series = svg.selectAll(".series")
        .data(seriesData, function (d) { return d.name; });

 //draw new lines
    newlines = series.enter().append("g").attr("class","series");
    newlines.append("path")
      .attr("d", function (d) {return line(d.values); })
      .on("mouseover", function(d){
            div.transition("tooltipIn")
                .duration(200)
                .style("opacity", .9)})
          .on("mouseout", function(d){
            div.transition("tooltipOut")
                .duration(500)
                .style("opacity", 0);
    });

    //change the line
    series.select("path")
        .transition("pathTrans")
        .duration(6000)
        .attr("d", function (d) { return line(d.values); })

     series.exit()
        .transition('exitTrans')
        .duration(7000)
        .attr("opacity", 0)
        .each('start.exit', function (d) {console.log(d.name + ' start') })
        .each('end.exit', function (d) { console.log(d.name + ' end') })
        .remove();

    svg.select(".y.axis")
        .transition("yaxisTrans")
        .duration(2000)
        .call(yAxis);

    svg.select(".x.axis")
        .transition("xaxisTrans")
        .duration(2000)
        .call(xAxis);

    //change grid lines
    svg.select(".grid")
        .transition("gridTrans")
        .duration(2000)
        .call(makeYGrid()
            .tickSize(-width, 0, 0)
            .tickFormat("")
        )

 series.select("transition")
        .each("interrupt", function(d){console.log("interrupted");});

有人可以解释如何让退出过渡到实际工作吗？

d3转换不在退出/删除时工作

0 个答案: