javascript - 删除 d3.js 中以前的路径并过渡到新数据

Question

我当前正在运行一个页面，该页面在页面加载时生成带有默认值的图表。该页面从 PHP 脚本生成的 TSV 中获取数据，并通过 GET 参数进行修改。

然后用户可以输入选项，并通过 AJAX 更新图表。

目前该页面几乎可以正常工作，但它正在用新数据覆盖新路径，而不删除旧路径。

新数据具有相同的 x 范围和域，但 y 坐标值不同，有时具有不同数量的值。

理想情况下，我希望旧路径能够从旧路径流畅地过渡 - 我怎样才能实现这一点？

我尝试添加下面的相关代码。对于其质量较差，我深表歉意，我对 d3 很陌生。

...

var line = d3.svg.line()
    .interpolate("basis")
    .defined(function(d) {
        return d.result != 0;
    })
    .x(function(d) {
        return x(d.date);
    })
    .y(function(d) {
        return y(d.result);
    });

var svg = d3.select(".chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var txtDays = 7;
var txtStartDate = "01/01/2013";
var txtEndDate = "01/01/2014";
var txtInterval = 1;

requestDataURL = //removed for SO


    d3.tsv("http://localhost" + requestDataURL, function(error, data) {
        var varPolls = d3.keys(data[0]).filter(function(key) {
            return key !== "date";
        });

        data.forEach(function(d) {
            d.date = parseDate(d.date);
        });

        var results = varPolls.map(function(name) {
            return {
                name: name,
                values: data.map(function(d) {
                    return {
                        date: d.date,
                        result: +d[name]
                    };
                })
            };
        });


        x.domain(d3.extent(data, function(d) {
            return d.date;
        }));



        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)

        var group = svg.selectAll(".group")
            .data(results)
            .enter().append("g")
            .attr("class", "group")
            .attr("data-name", function(d) {
                return d.name;
            });

        group.append("path")
            .attr("class", "line")
            .attr("d", function(d) {
                return line(d.values);
            })
            .style("stroke", function(d) {
                return colors[d.name];
            });

        group.append("text")
            .datum(function(d) {
                return {
                    name: d.name,
                    value: d.values[d.values.length - 1]
                };
            })
            .attr("transform", function(d) {
                return "translate(" + x(d.value.date) + "," + y(d.value.result) + ")";
            })
            .attr("x", 3)
            .attr("dy", ".35em")
            .text(function(d) {
                return Math.round(d.value.result);;
            });

        d3.select(".submit")
            .attr('disabled', null);


    });

$(".submit").click(function(event) {
    var data = [];
    //SORT OUT VALIDATION


    var req = $.ajax({
        url: requestDataURL,
        dataType: 'text',
        success: function(response) {
            data = response;
        }
    });

    requestDataURL = //new data removed for SO

        $.when(req).done(function() {
            d3.tsv("http://localhost" + requestDataURL, function(error, data) {

                var varPolls = d3.keys(data[0]).filter(function(key) {
                    return key !== "date";
                });

                data.forEach(function(d) {
                    d.date = parseDate(d.date);
                });

                var results = varPolls.map(function(name) {
                    return {
                        name: name,
                        values: data.map(function(d) {
                            return {
                                date: d.date,
                                result: +d[name]
                            };
                        })
                    };
                });


                x.domain(d3.extent(data, function(d) {
                    return d.date;
                }));


                var group = svg.selectAll(".chart")
                    .data(results);

                group.exit().remove();

                group.enter().append("g");
                group.attr("class", "group")
                    .attr("data-name", function(d) {
                        return d.name;
                    });

                group.append("path")
                    .attr("class", "line")
                    .attr("d", function(d) {
                        return line(d.values);
                    })
                    .style("stroke", function(d) {
                        return colors[d.name];
                    });




                group.transition()
                    .duration(500)
                    .ease("linear")
                    .attr("d", group);

            });

        });
});

Answer 1

问题是您没有正确处理输入和更新选择。通常，追加操作应该只发生在输入选择上，而不是更新上。当您获取新数据时，您将获得以下代码:

group.enter().append("g");
// ...
group.append("path");

这会将新的 path 元素附加到更新选择，这就是您在图表中看到的内容。处理新数据的正确方法如下所示:

var enterSel = group.enter().append("g");
// set attributes on the g elements
enterSel.append("path"); // append path elements to the new g elements

group.select("path") // select the path elements that are present, this includes the newly appended ones
     .attr("d", function(d) { // update the d attribute
       return line(d.values);
     });

此代码将为没有相应元素的数据项附加新元​​素，并更新现有元素的路径。