用d3.js从geojson对象的属性中创建一个表

Creating a table with d3.js from the properties in a geojson object

本文关键字：创建一个属性 js d3 geojson 对象更新时间：2023-09-26

我正在尝试创建一个包含内联geojson对象中列出的每个功能的属性的表。

下面的代码几乎得到了我想要的，但它只显示了第一个条目的属性。我应该如何修改它，以显示所有条目的属性?

var thedatatable = d3.select("#propertiestable")
    .append("table")
    .attr("class", "datatable");
var header = thedatatable.selectAll("th")
    .data(d3.keys(datapointsjson.features[0].properties))
    .enter()
    .append("th")
    .text(function (d) {
        return d
    });
var tr = thedatatable.selectAll("tr")
    .data(d3.values(datapointsjson.features[0].properties))
    .enter()
    .append("tr");
var td = thedatatable.selectAll("td")
    .data(d3.values(datapointsjson.features[0].properties))
    .enter()
    .append("td")
    .text(function (d) {
        return d
    });

我有理由确信这是"td"位，我弄错了，但我所尝试的只是显示第一个条目。

这是我正在工作的geojson，它需要内联在同一个文件。

var datapointsjson = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                136.33, -31.5
            ]
        },
        "properties": {
            "regno": "R123456",
            "taxon": "genus1 species1",
            "sitecode": "",
            "nearestnamedplace": "FREELING ISLAND",
            "preciselocation": "south coast",
            "collection": "Herpetology"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                137.07, -36.23
            ]
        },
        "properties": {
            "regno": "R654185",
            "taxon": "genus2 species2",
            "sitecode": "",
            "nearestnamedplace": "Neptune Island",
            "preciselocation": "Middle of island",
            "collection": "Herpetology"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                142.0358, -38.7719
            ]
        },
        "properties": {
            "regno": "R6528445",
            "taxon": "genus3 species3",
            "sitecode": "TT02",
            "nearestnamedplace": "Woolongong",
            "preciselocation": "5 km N",
            "collection": "Herpetology"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                137.6914, -32.2789
            ]
        },
        "properties": {
            "regno": "R654987",
            "taxon": "genus4 species4",
            "sitecode": "IL0601",
            "nearestnamedplace": "Ballarat",
            "preciselocation": "5.3 KM E",
            "collection": "Herpetology"
        }
    }]
};

我做了一个jsfiddle来显示结果

任何建议都将不胜感激。谢谢你。

我已经把你的手放在这里了，其中很多都是基于肖恩·艾伦的精彩答案。

现在，您需要提供一个数组，以便d3可以遍历它们(在本例中为4次)

var tr = thedatatable.selectAll("tr")
    .data(d3.values(datapointsjson.features))
    .enter()
    .append("tr");

然后你需要从json中提取你需要的信息:

var td = tr.selectAll("td")
    .data(function(row) {
        return headers.map(function(d) { console.log(row.properties)
            return {column: d, value: row.properties[d]};
        });
    })
    .enter()
    .append("td")
    .text(function (d) {
        return d.value;
    });