Question

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

当用户选择＆＃34;字段条件＆＃34;时，会显示图例。从下拉列表中。但是，什么时候用户选择＆＃34;状态＆＃34;从下拉列表中，所有刻度标记＆＃39;文字消失了。用户同样的事情选择一个＆＃34;县＆＃34;来自另一个下拉列表。我没有运气试图解决这个问题。

我按如下方式计算刻度线值（显示为文本）：

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

Answer 1

我只是看了一下您引用工作示例的页面上的代码，并认为我发现了问题。

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

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

是onChange的{{1}}函数的一部分。

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

我认为您想要从 mainSVG 中取出所有文本，即使用$("#stateSelect")。

更改上述选择将解决问题。（例如，如果您有要删除的文本的类，请使用id: svgMap2。

希望这会有所帮助。

Answer 2

我弄清楚为什么它会消失＆＃34;。网络是一种无国籍的媒介。因此，每次我从下拉列表中更改选择时，svg都会刷新并丢失其当前状态。所以我需要为州和县的下拉列表重新创建我的传奇。但是，对于县下拉列表，由于有缩放功能，这意味着每次我缩放到另一个县时，我再次丢失我的地图状态。所以我将重新创建的图例函数移动到了zoomedIn方法中（即，在缩放状态之后）。它现在有效。

D3.js：为什么我的传奇刻度线＆＃39;文字消失了？

2 个答案: