0

我是一名新手程序员，试图用 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)});

但是，无论在下拉菜单中选择了哪种其他配色方案，地图图例的颜色框都停留在蓝色配色方案上。这是一个例子。我尝试了一些事情，例如添加仅复制上面代码的附加代码，但将“svg#Mapsvg”替换为地图图例“svg#Legendsvg”，但没有任何运气。

如何使用从下拉菜单中选择的相同配色方案更新地图图例（“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>
4

1 回答 1

2

看来您实际上并没有为您的图例栏赋予 id 值Legendsvg。因此，如果您尝试使用#Legendsvg d3 进行选择，将无法获得您尝试选择的元素。尝试添加

.attr(id, "Legendsvg")

到您的图例创建语句，然后将您的 keyup / change 功能编辑为：

{d3.selectAll("svg#Mapsvg, svg#Legendsvg")...
于 2013-03-06T22:33:48.400 回答