当前位置: 首页 > 知识库问答 >
问题:

D3未在JSON文件中呈现地图数据

段干高歌
2023-03-14

我正在使用D3JS库来显示地图。加载美国各州地图可以正常工作,但如果我尝试加载单个州的县地图,则无法正常工作。我在所有州使用的文件位于https://raw.githubusercontent.com/d3/d3.github.com/master/us-10m.v1.json.我当前使用的状态映射是https://raw.githubusercontent.com/deldersveld/topojson/master/countries/us-states/MI-26-michigan-counties.json,尽管其他州也有同样的行为。

使用Chrome developer工具,我注意到,对于整个地图,状态(工作状态)使用一个“路径”元素渲染,其下有一个“d”元素:

<path d="M558.8236946374037,348.30360060633L559.3534721355569,348.2802219377176L567.3201262115587,347.9178525742255L571.2684679430778,347.7775805625511L572.0381446856777,347.7542018939387L577.0160540079474…

县呈现一个“g”元素和多个“路径”元素:

<g class="counties"><path d="M-86.2371554117112,44.517643343110294L-85.81834245759008,44.51265840274941L-85.82187674412275,44.16371257748768L-86.04276965241448,44.16620504766812L-86.38912973261591,44.178667398570326L-86.35201972402291,44.22851680217914L-86.26896399050521,44.344416665569646L-86.25305970110821,44.40049724462957L-86.24952541457554,44.48274876058412Z"></path><path d="M-84.13072063824123,42.42521462663013L-83.66596195919543,42.43144580208123L-83.55286479015007…

我用来渲染它们的D3代码是相同的,只是指向不同的数据源。这一条指向(工作)状态代码:

d3.json("us-10m.v1.json", function (error, us) {
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter()
.append("path")
.attr("d", path).append("svg:title");

文件本身的格式似乎是相同的,使用(当然)不同的数据,所以我不知道为什么svg代码的生成方式会有如此大的差异。我看到的两个不同之处是,美国各州文件有一个州文件缺少的“bbox”元素,而密歇根州文件在几何图形集合中有“properties”元素。

共有1个答案

公西苗宣
2023-03-14

你的问题和这个正好相反。美国topojson已经被投影到(960x600像素的区域)-topojson中的基础坐标表示像素坐标。使用预投影地理要素的地图不使用d3地理投影。如果使用路径生成器绘制,则如下所示:

 var path = d3.geoPath(); // or
 var path = d3.geoPath().projection(null);

但是,密歇根数据包含纬度/经度对。如果我们将您的Michigan topojson转换为geojson(因此我们有人类可读的坐标),我们会得到如下值:[-87.8629272167836,45.35386708864823]。如果我们使用空投影并将其视为像素值,那么这些特性将位于可视SVG的左侧,因为x值为负值。因此,我们需要一个路径投影:

var path = d3.geoPath().projection(someProjection);

我不确定你想要什么样的预测——预先预测的美国数据使用艾伯斯预测,所以如果我们想复制这一点,并扩大密歇根的中心,我们可以使用:

var projection = d3.geoAlbers()
   .fitSize([width,height],geojsonObject);   // width/height of SVG/canvas
var path = d3.geoPath().projection(projection);

如果在世界其他地区使用fitSize或fitExtent,结果可能不符合预期,则必须设置投影轮换,以考虑不同的位置。

还有其他方法可以用来居中/缩放地图,但这在许多问题/答案中有所涉及。但是,要显示地理数据,您需要将其从球面坐标投影到平面,任何d3地理投影都可以做到这一点。

 类似资料:
  • 问题内容: 更新待办事项中的对象的最佳方法是什么?我尝试通过它进行映射,但是它没有返回任何错误。 码: 问题答案: 您不会在体内返回任何内容,如果您不返回任何内容,则默认情况下它将返回。 用这个: 或者,您也可以这样编写它,而无需使用: 注意: 我们不能直接渲染任何内部,因为date是一个对象,因此您需要使用或任何其他方法将其转换为。 查看待办事项示例: 查看此代码段以了解:

  • 我使用Queue发送电子邮件,代码如下: 在控制器部分,我使用send- 我正在使用视图: 现在,当我尝试发送时,收到的电子邮件中没有任何内容。 我已经调试了整个供应商\laravel\framework\src\illighted\Mail\Mailer。php类并发现renderView函数中无法呈现视图。 我还将视图Doctype更改为HTML5,但得到了相同的结果,没有内容。 渲染视图正在

  • 我正试图从SQL Server导出一些数据作为HTML文件,但Internet explore将这些文件呈现得非常好,尽管chrome显示特殊字符。

  • 在我的React17.0.1 SPA翻译应用程序中,我有一个包含两个部分的页面。顶部用于输入,底部用于该输入的翻译。我在为该页面使用单个上下文/状态时遇到过问题,因为翻译是由远程API执行的,当它返回时,如果不更新输入部分并将其重置为调用翻译API时所保持的值,我就无法更新UI。 因此,我将页面分成两个上下文,一个用于输入,一个用于翻译。到目前为止还好。翻译的渲染是我第一次做的。但是,尽管翻译上下

  • [更新] 这是一个简化的用例。我们的实际需求是,我们有。RTF文档作为BLOB存储在DB中。我们希望在我们的大报告之间插入这些文档的内容。这些rtf文件包含文本、表格和图像。当我试图读取这个rtf文件时,只有文本出现。有人能提出任何其他的替代方案来实现这一点吗?

  • 问题内容: 假设您位于用户控制器中,并且想要获取显示请求的json响应,那么可以在您的views / users /目录中创建一个名为show.json的文件,并在用户之后#show操作完成后,它将呈现文件。 当前,您需要执行以下操作: 但是,如果您可以创建一个show.json文件,它会像这样自动呈现,那就太好了: 这将为我节省大量的痛苦,并且会消除我在控制器中渲染json时得到的那种可怕的肮脏