使用D3绘制多边形

Question

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

*编辑以添加示例坐标

import numpy as np


class MatrixClass(object):
    def __init__(self):
        self.tokens = ['x', 'y', 'z']
        self.sequences = [(t1, t2) for t1 in self.tokens for t2 in self.tokens]
        self.p = np.full((len(self.tokens), len(self.sequences)), 0.0)
        self.count = {}
        for t in self.tokens:
            self.count[t] = {}
            for s in self.sequences:
                self.count[t][s] = 0

    def update_probability(self):
        p = self.p
        for i, t in enumerate(self.tokens):
            total = 0
            for j, s in enumerate(self.sequences):
                total += self.count[t][s]
            if total != 0:
                for s in self.sequences:
                    p[i][j] = self.count[t][s] / float(total)
                    if self.count[t][s] > 0:
                        print('****Prob ' + str(i) + ',' + str(j) + ' inner loop: ' + str(p[i][j]))

                if i == 1 and j == 8:
                    print('  Prob ' + str(i) + ',' + str(j) + ' outer loop ' + str(p[i][j]))

        return p

    def update_count(self, data):
        for measure0, measure1 in zip(data, data[1:]):
            token = measure1[0]
            self.count[token][measure0] += 1
        p = self.update_probability()
        self.p = p


m = MatrixClass()
data = [('y', 'y'), ('y', 'z')]
m.update_count(data)

脚本看起来像

{  "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
                ],.....

据我所知没有错误，但是svg不会显示任何内容。我也尝试过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");}); scale()和center()之类的方法。到目前为止，没有任何效果。这是我的第一个D3脚本-帮助。

Answer 1

找到了这个D3 polygon 原来.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");
            });