Question

我有一个显示10个系列数据的多线图，我试图用新数据来更新这些线，但出于某种原因我无法做到这一点。使用新数据的过渡对于线上的点是有效的，所以我假设我没有选择正确的元素，但对于我的生活，我无法弄清楚我的错误在哪里。有一次，我有一行更改，表明它只是从数据数组的第一个索引更新。任何见解将不胜感激：

初始系列创作 -

    var series = svg.selectAll(".series")
        .data(seriesData)
        .enter().append("g")
        .attr("class", "series");

series.append("path")
        .attr("id", function (d) {
            return d.name;
        })
        .attr("stay", "false")
        .attr("class", "line")

        .attr("d", function (d) {
            d.line = this;
            return line(d.values);
        })
        .attr("opacity", ".2")
        .on("click", function () {
            fadeOuts(this);
        })
        .style("stroke", function (d) {
            return strokeCol;
        })
        .style("stroke-width", "4px")
        .style("fill", "none");

更新功能：这就是我被困住的地方，积分会对新数据做出反应，但路径却没有。

    series.data(newseriesData);
    series.selectAll("path")
            .attr("id", function (d) {
                return d.name;
            })
            .attr("d", function (d) {
                d.line = this;
                return line(d.values);
            })
            .attr("opacity", ".2")
            .on("click", function () {
                fadeOuts(this);
            })
            .style("stroke", function (d) {
                return strokeCol;
            })
            .style("stroke-width", "4px")
            .style("fill", "none");
    series.selectAll(".point")
            .data(function (d) {
                return d.values;
            })
            .transition()
            .attr("cx", function (d) {
                return x(d.label) + x.rangeBand() / 2;
            })
            .attr("cy", function (d) {
                return y(d.value);
            })
            .style("fill", function (d) {
                return color(d.name);
            })
            .style("stroke", "grey")
            .style("stroke-width", "2px")
            .on("mouseover", function (d) {
                showPopover.call(this, d);
            })
            .on("mouseout", function (d) {
                removePopovers();
            })

是的，这是一个大学项目，这是最后一项工作，在这方面花了50多个小时的努力，我只是想把它淘汰。

Answer 1

简短的回答是，您应该使用series.selectAll("path")而不是series.select("path")。请记住，series已经是一个选择，并且对其中的每个元素都进行了子选择。您已为每个选项准确添加了一个元素，因此.select()很好，不需要.selectAll()。

这主要区别在于.select()继承了父选择的数据，而.selectAll()没有 - 在执行.selectAll()时数据根本没有更新，因此没有发生了变化。

d3多线图更新

1 个答案: