3

最初に、GeoJSONファイルで定義されたパスと、州名などの追加情報を使用して州のアウトラインを定義するマップを作成しています。ロード後、いくつかのボタンとチェックボックス（年、データのさまざまなサブセット）を使用して、状態を入力し、csvからのデータに基づいてツールチップにデータを入力したいと思います。

jsonファイルではなくcsvを使用して状態オブジェクトで.data（）をもう一度呼び出すと、パスはjsonにのみ存在するため、パスが消えることがわかりました。特定の変数のみを更新できる方法はありますか？状態オブジェクトを動的データにバインドするためのより良い方法はありますか？

4

1 に答える 1

2

私がこれに一般的にアプローチした方法、およびコロプレス マップの例でコードを設定する方法は、2 つのファイルを別々にロードし、必要なときにフィーチャ ID でデータを結合することです。これは、次のようにファイルを順番にロードする場合に最も簡単です。

// make a container
var counties = svg.append("svg:g")
    .attr("id", "counties");

// load the data you're showing
d3.json("unemployment.json", function(data) {
  // load the geo data (you could reverse the order here)
  d3.json("us-counties.json", function(json) {
    // make the map
    counties.selectAll("path")
        .data(json.features)
      .enter().append("svg:path")
        .attr("d", path);
    // now join the data, maybe in a separate function
    update(data)
  });
});

update()関数では、データを取得し、id に基づいて操作 (色など) をマップに適用します。

update(data) {
    // look at the loaded counties
    counties.selectAll("path")
      // update colors based on data
      .attr('fill', function(d) {
        // get the id from the joined GeoJSON
        var countyId = d.id;
        // get the data point. This assumes your data is an object; if your data is
        // a CSV, you'll need to convert it to an object keyed to the id
        var datum = data[countyId];
        // now calculate your color
        return myColorScale(datum);
      });
}
于 2012-08-29T18:36:43.537 に答える