從下拉菜單中選擇顏色選項更新地圖多邊形和地圖圖例？

我是一名嘗試與d3製作交互式地圖的新手程序員。到目前爲止，我已經能夠通過從下拉菜單中選擇Colorbrewer CSS顏色方案來更新SVG choropleth（分位數）圖中多邊形的顏色。從下拉菜單中選擇顏色選項更新地圖多邊形和地圖圖例？

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>

來源

2013-02-20 user2072931

它不會出現，你實際上給你傳說吧id值爲Legendsvg。因此，如果您嘗試使用#Legendsvg選擇d3不會獲取您嘗試選擇的元素。嘗試添加

.attr(id, "Legendsvg")

到你的傳奇創建語句，然後編輯您的KEYUP /更改功能：

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

來源

2013-03-06 22:33:48 Josh

從下拉菜單中選擇顏色選項更新地圖多邊形和地圖圖例？

回答

相關問題