Обновление полигонов карты и легенды карты с выбранным параметром цвета в раскрывающемся меню?

Я начинающий программист, пытаюсь сделать интерактивную карту с помощью d3. До сих пор мне удавалось обновлять цвета полигонов на картограмме (квантиле) SVG, выбирая цветовую схему Colorbrewer CSS из раскрывающегося меню.

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>

html css d3.js map colorbrewer
person user2072931    schedule 20.02.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Не похоже, что вы на самом деле дали своим столбцам легенды значение идентификатора Legendsvg. Поэтому, если вы попытаетесь выбрать с помощью #Legendsvg, d3 не получит элементы, которые вы пытаетесь выбрать. Попробуйте добавить

.attr(id, "Legendsvg")

к вашим операторам создания легенды, а затем отредактируйте свои функции keyup/change на:

{d3.selectAll("svg#Mapsvg, svg#Legendsvg")...
person Josh    schedule 06.03.2013