5

D3.js でマップ上の 2 つのデータセットを結合したいと考えています。

例えば：

1 番目のデータセット: .json の空間データ。

2 番目のデータセット: .csv の領域へのデータ

--> 地図上にカーソルを合わせると、ツールチップに 2 番目のデータセットのデータを含む文が表示されます。

マップを作成し、.json ファイル内のデータでツールチップを表示することはできますが、2 番目のデータセットを挿入するにはどうすればよいですか?

  • マップを作成する関数内の新しい関数?
  • まったく新しい方法を取らなければなりませんか？
  • d3.js を使用する前に、.json ファイルを 2 番目のデータセットとマージする必要がありますか?

どんな考えでも感謝します！:)

4

1 に答える 1

4

それで、あなたが求めているのは、jsonから空間データを取得し、それを個別にロードされたcsvデータと結合する方法だと思いますか?

描いていたコロプレス マップで同様のことを行いました。基本的には、トポロジ要素 ID からデータ オブジェクトへのマップを作成し、トポロジ要素 ID を使用してルックアップを行い、実際に描画されたマップ要素に関連付けたいものを取得しました (このメソッドを使用して、fips 国コードに基づいてコロプレスの色を設定していました)。

したがって、基本的には、ホバーできるようにする各マップ要素に関連付けられた ID を持つようにマップを描画します。次に、mouseover/mouseout ハンドラーで、その ID を使用してツールチップに表示するデータを検索し、svg タイトル要素またはヒントを使用するか、svg テキスト要素またはツールチップを表示するものを手動で描画します。

ツールチップを描画するための便利なリファレンスを次に示し ます。

フィドルから：

function mouseover(d) {
    d3.select(this).append("text")
        .attr("class", "hover")
        .attr('transform', function(d){ 
            return 'translate(5, -10)';
        })
        .text(d.name + ": " + d.id);
}

// Toggle children on click.
function mouseout(d) {
    d3.select(this).select("text.hover").remove();
}

基本的には、SVG テキスト要素を追加し、ホバーされている要素の位置からオフセットします。

外部マップでデータを検索する方法のサンプルを次に示します。

// Update the bound data
data.svg.selectAll("g.map path").transition().duration(750)
    .style("fill", function(d) {
        // Get the feature data from the mapData using the feature code
        var val = mapData[d.properties.code];

        // Return the colorScale value for the state's value
        return (val !== undefined)? data.settings.colorScale(val) : undefined;
});

データが静的な場合は、topojson ファイルに結合できます (使用している場合)。https://github.com/mbostock/topojson/wiki/Command-Line-Reference

クライアントがデータを変更する可能性があるため、データを個別に保持し、データが変更されるたびにマップを再描画して、色が更新されるようにしました。私のデータは topojson だったので、d.properties.code を使用してマップ データからフィーチャ ID にアクセスできました (上記で参照した topojson ツールを使用してコードを topojson ファイルに結合したためです...しかし、任意の一意の ID を使用できます)。あなたが持っている空間データファイルにあります）。

于 2013-10-11T17:00:11.073 に答える