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")

凡例作成ステートメントに移動してから、キーアップ/変更関数を次のように編集します。

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