D3.js：为啥我的图例刻度线的文字消失了？

Posted 2023-02-16

【中文标题】D3.js：为啥我的图例刻度线的文字消失了？

【英文标题】：D3.js: Why are my legend tick marks' text disappearing?D3.js：为什么我的图例刻度线的文字消失了？

【发布时间】：2018-07-12 01:57:47

【问题描述】：

我的地图有一个线性渐变图例。 x 轴值是根据最小值计算的 和来自基础数据的最大值。我从这个网站改编了这个传说：https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient.html

当用户从下拉列表中选择“字段条件”时，会显示图例。然而，当 用户从下拉列表中选择一个“状态”，所有刻度线的文本都会消失。用户时同样的事情 从另一个下拉列表中选择一个“县”。我没有运气试图解决这个问题。

我正在计算刻度线值（显示为文本），如下所示：

var dataRange = getDataRange();
var min = parseFloat(dataRange[0].toFixed(3));
var max = parseFloat(dataRange[1].toFixed(3));
var legendW = 160, legendH = 20;

//create tick marks
var legendX = d3.scaleLinear()
    .domain([min, max])
    .range([0, legendW]);

var axis = d3.axisBottom(legendX);

d3.select("#svgLegend")
    .attr("class", "axis")
    .attr("width", legendW)
    .attr("height", legendH * 2)
    .append("g")
    .attr("id", "g-legend")
    .attr("transform", "translate(2," + legendH + ")")   //margin.left; height/2
    .call(axis);

有关工作示例，请参阅：http://realtimeceap.brc.tamus.edu

【参考方案1】：

我只是浏览了您引用工作示例的页面上的代码，并认为我找到了问题所在。

这是从图例SVG 中取出刻度线的行：

d3.selectAll("text").remove();

这是 $("#stateSelect") 的 onChange 函数的一部分。

行号：279 更具体（在 index.html 文件中）

我认为您想从 ma​​inSVG 中取出所有文本，即使用 id: svgMap2。

更改上述选择将解决此问题。 （例如，如果您有要删除文本的类，请使用d3.selectAll('text.<classname>')。

希望这会有所帮助。

【参考方案2】：

我知道它为什么会“消失”。 Web 是一种无状态的媒体。因此，每次我从下拉列表中更改选择时，svg 都会刷新并丢失其当前状态。所以我需要为州和县的下拉列表重新创建我的图例。而且，对于县级下拉列表，由于有缩放功能，这意味着每次我缩放到另一个县时，我都会再次丢失我的地图状态。所以我将重新创建图例函数移动到 zoomedIn 方法中（即在缩放状态之后）。现在可以了。