D3.JSとFlaskの問題 - 米国の地図を取得しようとしています

Question

私はD3.JSとFlaskを使って米国の地図を表示しようとしています。地図が表示されていないという問題があります。私は、SVG要素が添付されていること、jsonデータが通過していますが、マップ自体は現れていないことを知っています。私は単純なindex.htmlドキュメントを作成しようとし、そのプロジェクト内にjsonファイルを配置し、Pythonのシンプルなサーバーを使ってマップを見ることができました。今すぐコードのために。ここで起動するには

はJSコードです：

<script type="text/javascript"> 

    //Define default path generator 
    let path = d3.geo.path(); 

    //Creating the SVG element and attaching it to the page. 
    let svg = d3.select("#us-map") 
     .append("svg") 
     .attr("width", 900) 
     .attr("height", 700); 

    //This function will get the data for the map of the U.S 
    d3.json("/json", function(json){ 
     console.log(json.features) //This shows an array of 52 objects 
     //Bind data and create one path per GeoJSON feature 
     svg.selectAll("path") 
      .data(json.features) 
      .enter() 
      .append("path") 
      .attr("d", path); 
     }); 

    </script> 

Pythonコード：

@app.route("/json") 
def json(): 
    data = Data() 
    data_file = data.convert_json_for_d3() 
    #return data_file 
    return data_file.to_json() 

私は上記のコードから呼び出すしていたクラスのメソッド：

def convert_json_for_d3(self): 
    self.__data = pd.read_json('us-states.json') 
    df = self.__data 
    return df 

HTML：

<section id="us-map"> 
    <h1>UFO Sitings in the U.S.</h1> 
</section> 

私はこれを1日中作業しています。最初は、D3で動作するjsonデータを取得するのは難しい作業でした。私はその時点でそれを持っていると思った。しかし、私が述べたように、地図は表示されません。 jsonと一緒に単純なindex.htmlファイルに配置するとうまくいきます。だから問題がフラスコかどうか疑問に思っていますか？ 1つの最後の点は、私はWebのInteractive Data Visualizationという本のコードに従っています。私はからコードを引っ張ったgithubのレポはこちらです：

 object {type: "FeatureCollection", features: Array(52)} 
      features:Array(52) 
      0:Object 
       geometry: Object 
       coordinates: Array(1) 
        0: Array (33) 
        0 
        1 
        : 
      1:Object 
      : 

Data in my Flask Project looks like this: 
Object {features: Object, type: Object} 
    features: Object 
     0: Object 
     geometry: Object 
      coordinates: Array(1) 
      0: Array (33) 

      0:Array(2) 
    1: Object 
    : 

だから、オブジェクトの配列の両方がほぼ同じ-除いて非常にために、次のとおりです。データはこのとして表示され、簡単なHTMLファイルでの作業https://github.com/alignedleft/d3-book/blob/master/chapter_12/01_paths.html

一行目。

ありがとうございました。 （下記のコメントや更新の質問に基づいて）

Answer 1

2つの問題

Oneをフラスコプロジェクト内にGeoJSONが有効ではないです。たとえば、フィーチャは配列でなければなりません。オブジェクトではなく、typeはまだfeatureCollectionでなければなりません（これについては以下のコメントで説明します）。行のどこかで、geojson構造がd3.geo.path（）によって有効なgeojsonとして受け入れられないものに変更されています。

2つは、緯度と経度のペア（各フィーチャのジオメトリ内）をsvg座標空間に変換するための投影を使用していないことです。第二の問題については

：d3.geo.path();を使用している場合

あなたが投影（例：d3.geo.path().projection(d3.geo.mercator());）を指定する必要があります。投影を指定しない場合は、null投影が使用されます。これは変換を適用せずに提供されたgeojsonを解釈します - 本質的にあなたの値はsvgのピクセル値に変換されます。

米国は西半球にあるため、すべての経度は負の値です（南北の地理的値が北に行くにつれて増加し、svgの値が下がるにつれて画像は上下逆になります）。 null投影（svgに他の変換なし）は、svgの境界の左にあるパスを描画します。これら三つのことが起こることができる理由です：

• を「マップ自体は、[視覚]来ていない「JSONデータが通過来ている」
• 「SVG要素が添付されている」が、
• あなたは、参照章で参照

geojson「最大非投影データである - それは各頂点の緯度と経度のペアが含ま：[-133.05341,56.125739]。これは理想的です.d3.geo.projectionはこのタイプの座標をとり、3次元楕円上の点を2次元デカルト平面に投影します。 既に平面データがある場合は、ジオ変換を使用する必要があります。

データを視覚化するには、投影を選択して緯度と経度のペアを適切な値に変換する必要があります。 USA albersは、アラスカをスケールダウンし、アラスカとハワイの両方をアメリカ大陸に近づける複合投影であるため、最も簡単です。 Albers USAは投影パラメータ（中心、回転、平行、スケールなど）を変更せずに米国を示すようにすべての投影パラメータを設定しますが、他の投影では適切なパラメータを設定する必要があります。私はあなたのデータは、次のコードを使用albersUsa投影で表示するようになった

：

var projection = d3.geo.albersUsa().translate([width/2,height/2]); 

var path = d3.geo.path().projection(projection); 

d3.json("us.json",function(data) { 

    svg.append("path") 
     .datum(data) 
     .attr('d',path) 
     .attr('fill','steelblue') 
     .attr('stroke','black'); 

}); 

Hereは、作業のデモとスクリーンショットです：

マップがあまりにもあればあなたのsvg（またはその逆）の場合は、projection.scale（n）でスケールを設定できます。小さい数字をズームアウトし、大きな数値をズームインします。