html 使用d3.exit().remove()后，文本未随d3动态更新

qzwqbdag 于 2022-12-09 发布在其他

关注(0)|答案(1)|浏览(185)

因此，我正在构建一个交互式 Jmeter 板，当您单击按钮时，条形图会发生如下变化（https://d3-graph-gallery.com/graph/barplot_button_data_hard.html）
在我的代码中，我尝试通过执行以下操作来更新条形图的标题

var t = svg_bar_graph_time_date.selectAll("label").data(data_bar_graph_time_date)

                t.enter()
                .append("text")
                .attr("x", width_time_date/2)
                .attr("y", 20)
                .attr("text-anchor", "middle")
                .style("font-size", "16px")
                .text(date);
                
                t.exit().remove()

但是，新标题没有更改条形图的标题，而是与前一个标题重叠。如何删除前一个标题并将其更改为新标题？

Html

来源：https://stackoverflow.com/questions/74711192/text-not-updating-dynamically-with-d3-after-using-d3-exit-remove

1条答案

按热度按时间

ru9i0ody1#

由于您要将数据绑定到具有label类的元素（除非您选择的是<label>元素，但实际情况似乎并非如此）...

var t = svg_bar_graph_time_date.selectAll(".label")
    .data(data_bar_graph_time_date);

...您需要将该类应用于输入的选择，并将其与更新的选择合并：

t = t.enter()
    .append("text")
    .attr("class", "label")
    .attr("x", width_time_date/2)
    .attr("y", 20)
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .merge(t)
    .text(date);

如果使用的是不带合并的D3版本，请更改更新选择：

t.text(date);

另外，奇怪的是，你绑定了数据，却从来没有使用过它（你使用了date，但不清楚它来自哪里）。如果这是有意的，删除退出选择，只使用data([true])或任何其他非空的单元素数组。

赞(0）回复(0）举报 2022-12-09

我来回答

html 使用d3.exit().remove()后，文本未随d3动态更新

1条答案

相关问题

热门标签

最新问答