javascript - D3.JS 和 Flask 的问题 - 试图获取美国 map

Question

我正在开发一个使用 D3.JS 和 Flask 的项目，试图显示美国 map 。问题是 map 没有显示。我知道 SVG 元素正在附加，json 数据正在通过，但 map 本身没有出现。然后，我尝试创建一个简单的 index.html 文档，并将 json 文件放入该项目中，并使用 Python 简单服务器能够查看 map 。现在来看代码。

首先是 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>

我已经为此工作一天了。起初，让 json 数据与 D3 一起工作是困难的部分。我想我当时就拥有了。然而，正如我所说， map 没有显示。如果我将它与 json 一起放入一个简单的 index.html 文件中，它确实可以工作。所以我想知道问题是否出在 Flask 上？最后一点，我正在遵循《Web 交互式数据可视化》一书中的代码。我从中提取代码的 github 存储库位于:https://github.com/alignedleft/d3-book/blob/master/chapter_12/01_paths.html

使用一个简单的 HTML 文件，数据显示如下:

        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
   :

所以这两个对象数组几乎是相同的——除了第一行。

感谢您的帮助。

Answer 1

两个问题(基于下面的评论和更新的问题)

其中之一是您的 Flask 项目中的 geojson 无效。例如，功能应该是一个数组 - 而不是一个对象，类型仍然应该是 featureCollection (这将在下面的评论中讨论)。在此过程中，您的 geojson 结构被更改为 d3.geo.path() 不接受的有效 geojson 结构。

两个是您没有使用投影将纬度和经度对(在每个要素的几何形状中)转换为 svg 坐标空间。

第二期:

使用d3.geo.path();时，您需要指定投影(例如:d3.geo.path().projection(d3.geo.mercator()) ;)。如果您不提供投影，则使用空投影。这会解释提供的 geojson 而不应用任何转换 - 本质上您的值被转换为 svg 上的像素值。

美国位于西半球，因此所有经度均为负(并且随着北南地理值随着向北移动而增加，svg y 值随着向下移动而增加，图像将是颠倒的)。空投影(svg 上没有其他变换)将绘制一条位于 svg 边界左侧的路径。这就是为什么会发生这三件事:

• “正在附加 SVG 元素”
• “json 数据正在通过”，但是
• “ map 本身[视觉上]没有出现”

您引用的章节中引用的 geojson 是未投影的数据 - 它包含每个顶点的纬度和经度对:[-133.05341,56.125739]。这是理想的，因为 d3.geo.projection 采用这种类型的坐标，三维椭球上的点，并将它们投影到二维笛卡尔平面上。 如果您已有平面数据，则需要使用地理变换。

因此，为了可视化您的数据，您需要选择一个投影来将纬度和经度对转换为适当的值。 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 是一个工作演示和屏幕截图:

如果您的 map 对于 svg 来说太大(反之亦然)，您可以使用projection.scale(n) 设置比例，较小的数字缩小，较大的数字放大。