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

标签 html css dictionary d3.js colorbrewer

我是一名菜鸟程序员,正在尝试使用 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>

最佳答案

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

.attr(id, "Legendsvg")

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

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

关于html - 使用下拉菜单中选定的颜色选项更新 map 多边形和 map 图例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14988293/

相关文章:

javascript - 使用 img.src 将 img.onload 链接到 Image() 对象

javascript - 如何在不使用 jQuery 的情况下在 IE 的数字输入中显示微调控件(向上/向下箭头)?

css - Chrome : The same version, 同一页面的不同CSS样式

html - 最大宽度媒体查询采用错误的宽度

python - 将文件转换为具有字符重复计数值的字典

javascript - 添加按下键盘时的悬停效果

javascript - 日期显示不正确

jquery - 我的网页底部有一些不必要的空白,有人可以帮我去掉吗?

powershell - 循环遍历哈希,或在 PowerShell 中使用数组

java - 使用 values() 方法从 LinkedHashMap 获取条目的 LinkedList