使用D3绘制多边形 [英] Plot polygon using D3

问题描述

我正在尝试使用.json文件绘制多边形.

I am trying to plot a polygon using a .json file.

*编辑以添加样本坐标

*EDIT to add sample coordinates

{  "type": "FeatureCollection",  "features": [    {
  "type": "Feature",
  "geometry": {
                "type": "Polygon",
        "coordinates": [
            [
                [
                    -0.0691250297447329,
                    51.5462448874379
                ],
                [
                    -0.0691510961928943,
                    51.5459630404703
                ],
                [
                    -0.0692056531364391,
                    51.5456827414947
                ],
                [
                    -0.0692883661627076,
                    51.5454050640766
                ],
                [
                    -0.0693070134960316,
                    51.545356361588
                ],.....

脚本看起来像

var width = 960;
    var height = 600;

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);


    d3.json("/GeoJsonFiles/samplePolygon1.json", function (error, json) {
        if (error) console.error(error);

        var projection = d3.geoMercator()
            .fitSize([width, height], json);
        var path = d3.geoPath().projection(projection);
        svg.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("d", path)
            .attr("fill", "gray")
            .attr("stroke", "black");});

据我所知没有错误，但是svg不会显示任何内容.我也尝试过scale() center()和offset()之类的方法.到目前为止，没有任何效果.这是我的第一个D3脚本-帮忙.

As far as I can tell there is no error but svg doesn't display a thing. I have also tried methods like scale() center()and offset(). Nothing works so far. This is my first D3 script - do help.

推荐答案

找到了这个

Found this D3 polygon Turns out the following code was essential.

.attr("points", function (d) {
  return d.map;
})

完整的代码如下.

d3.json("/GeoJsonFiles/samplePolygon1.json", function (error, json) {
                if (error) console.error(error);

                var projection = d3.geoMercator()
                    .fitSize([width, height], json);
                var path = d3.geoPath().projection(projection);
                svg.selectAll("path")
                    .data([json])
                    .enter()
                    .append("path")
                    .attr("points", function (d) {
                        return d.map;
                    })
                    .attr("d", path)
                    .attr("fill", "gray")
                    .attr("stroke", "black");
            });

这篇关于使用D3绘制多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！