Question

我正在使用范围滑块来添加/删除直方图后面一行的点在不更新数据的情况下，正确显示文本标签，当我使用滑块更新值时，我希望文本标签跟随线，这样它们就能正确显示点的值。
该行的更新有效，但我无法正确更新文本标签。
现在，laberls在变换函数之外被绘制成如此：

var SerifText = svg.append("g")
    .attr("id", "serif-labels")
    .selectAll("text")
    .data(histogSerif)
    .enter()
    .append("text")
    .text(function (d) { return d.y >= 1 ? d.y : null; })
    .attr("text-anchor", "middle")
    .attr("font-size", 10 + "px")
    .attr("fill", "#f0027f")
    .attr("x", function (d) { return x(d.x)})
    .attr("y", function (d) { return y(d.y) - padding; })
    .attr("visibility", "hidden"); //the hidden & visible is managed by an external checkbox

然后在on-change函数中我输入了这段代码：

    SerifText.selectAll("text").remove(); 
    /* If I do SerifText.remove() it does remove the text but also the group of course, 
but as it is it doesn't work */
    SerifText.selectAll("text")
        .data(histogSerif)
        .enter()
        .append("text")
        .text(function (d) { return d.y >= 1 ? d.y : null; })
        .attr("text-anchor", "middle")
        .attr("font-size", 10 + "px")
        .attr("fill", "#f0027f")
        .attr("x", function (d) { return x(d.x)})
        .attr("y", function (d) { return y(d.y) - padding; });

但不幸的是，这不起作用。如果可能的话，我还希望能够通过外部复选框保留可见/隐藏状态的管理完整代码为here

Answer 1

不是试图保存对要删除的标签的引用，然后重新选择它们，而是使用引用SerifText元素选择的变量，例如：

var SerifTextGroup = svg.append("g")
            .attr("id", "serif-labels");  

SerifTextGroup.selectAll("text")
            .data(histogSerif)
            .enter()
            //... and so on

然后您的其余代码应该按照书面形式工作（只需将SerifText更改为SerifTextGroup）。

使用更新添加/删除线点标签

1 个答案: