Question

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

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)});

但是，无论在下拉菜单中选择了哪种其他颜色方案选项，地图图例的颜色框都会粘贴在蓝色配色方案上。这是一个example。我尝试过一些东西，例如添加简单复制上面代码的其他代码，但用地图图例“svg＃Legendsvg”替换“svg＃Mapsvg”，但没有任何运气。

如何使用从下拉菜单中选择的相同颜色方案更新地图图例（“svg＃Legendsvg”）和地图本身？

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

以下是地图图例颜色框的代码，供参考：

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

您似乎没有将图例栏的ID值设为Legendsvg。因此，如果您尝试使用#Legendsvg进行选择，则d3将无法获取您尝试选择的元素。尝试添加

.attr(id, "Legendsvg")

到您的图例创建语句，然后将您的键盘/更改功能编辑为：

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

从下拉菜单更新地图多边形和地图图例以及所选颜色选项？

1 个答案: