html - 使用下拉菜单中选定的颜色选项更新 map 多边形和 map 图例？

Question

我是一名菜鸟程序员，正在尝试使用 d3 制作交互式 map 。到目前为止，我已经能够通过从下拉菜单中选择 Colorbrewer CSS 配色方案来更新 SVG 等值线(分位数) map 中多边形的颜色。

d3.select("select#ColorSelection")
    .on("keyup", function() {d3.selectAll("svg#Mapsvg").attr("class", this.value)})
    .on("change", function() {d3.selectAll("svg#Mapsvg").attr("class", this.value)});    

但是，无论在下拉菜单中选择什么其他配色方案选项， map 图例的颜色框都停留在蓝色配色方案上。这是一个 example .我已经尝试了一些事情，例如添加额外的代码来简单地复制上面的代码，但是用 map 图例“svg#Legendsvg”替换“svg#Mapsvg”，但没有任何运气。

如何使用从下拉菜单中选择的相同配色方案更新 map 图例(“svg#Legendsvg”)和 map 本身？

如果我遗漏了一些非常基本的东西，请提前致歉。谢谢你尽你所能的帮助!

下面是 map 图例颜色框的代码，供引用:

var legends = d3.select('svg#Legendsvg')
var legendbars = legends.selectAll('rect')
        .data(legend)
        .enter()
        .append('rect')
        .attr('x', 5)
        .attr('y', function(d, i) {return (i*30)+25})
        .attr('height',28)
        .attr('width',30)
        .attr('class', function (d) {return quants(d)} )
        ;

以及下拉菜单的引用代码:

    <p>Color Scheme: 
        <select id="ColorSelection">
        <option value="Blues" selected>Blues</option>
        <option value="Greys">Greys</option>
        <option value="Greens">Greens</option>
        <option value="Oranges">Oranges</option>
        <option value="Reds">Reds</option>
        <option value="Purples">Purples</option>
        <option value="YlGn">Yellow-Green</option>
        <option value="YlGnBu">Yellow-Green-Blue</option>
        <option value="GnBu">Green-Blue</option>
        <option value="BuGn">Blue-Green</option>
        <option value="PuBuGn">Purple-Blue-Green</option>
        <option value="PuBu">Purple-Blue</option>
        <option value="BuPu">Blue-Purple</option>
        <option value="RdPu">Red-Purple</option>
        <option value="PuRd">Purple-Red</option>
        <option value="OrRd">Orange-Red</option>
        <option value="YlOrRd">Yellow-Orange-Red</option>
        <option value="YlOrBr">Yellow-Orange-Brown</option>
        </select></br>

Answer 1

看来您实际上并没有为图例栏指定 Legendsvg 的 id 值。因此，如果您尝试使用 #Legendsvg d3 进行选择，则不会获得您尝试选择的元素。尝试添加

.attr(id, "Legendsvg")

添加到您的图例创建语句，然后将您的 keyup/change 函数编辑为:

{d3.selectAll("svg#Mapsvg, svg#Legendsvg")...