d3でデータをバインドできません

Question

米国のすべての郡を表すgeojsonマップをd3で作成し、サーバーからcsvファイルを取得した後にシェイプの色を動的に変更しようとしています。

各郡の形状は、SVGパス内の属性として割り当てられた一意の識別子を持っているとのdivの次のスタイルの中にネストされている：<div id="map"><svg ...><path ...></path></svg></div>）：

<path class="county" cid="49003" d="M268.97942180906057, 
180.25136249051877L267.99968608232916,179.94417907047466L266.73835706796865, 
181.58920557665408L263.8700579925135,181.0924673795946L259.5224347320402, 
185.30429000298852L255.0646299840323,185.9781064759694L237.98063840912738, 
182.81739842586433L241.51437533212444,164.45244088140475L255.62126287079593, 
166.99664084530673L266.95905635804127,169.0065343660998L268.07266792127234, 
171.7741286687334L267.5663893622565,174.8022351145563L267.9956982687371, 
178.0311646832157L268.89925024903414,178.0929836991428Z"></path> 

私はD3を持つ要素を選択することができるよ

と属性値をコンソールに表示しますが、属性の追加や変更はできません。

が

bar = data.map(function(d) { return [d["n"], d["i"], +d["t"]]; }); 

これは、のように思える：

bar.forEach(function(d, i){ 
    d3.select('#map').select('.county[cid="' + d[1] + ']"').attr('foo', 'bar') 
}); 

バー変数は、以前のスクリプトでロードされたCSVデータを次のとおりです。ここで

は、私が使用しようとしているコードのサンプルです簡単で明解な解決策ですが、なぜこれがうまくいかないのか理解できません。ご協力ありがとうございます。

Answer 1

重要な部分がセレクタ内の引用符の配置だった：

元：

d3.select('#map').select('.county[cid="' + d[1] + ']"').attr('foo', 'bar') 

...となる（.ATTR近く閉鎖ブラケットによって二重引用符に注意） ：

d3.select('#map').select('.county[cid="' + d[1] + '"]').attr('foo', 'bar') 

私はにconsole.logにそれを印刷したとき、私は選択されたオブジェクトの配列を返すことができたかさっぱりだが。