javascript - 使用 d3.js 根据 geojson 对象中的属性创建表

Question

我正在尝试创建一个表，其中包含内联 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 显示结果

如有任何建议，我们将不胜感激。谢谢。

Answer 1

我已经把你的 fiddle 调到了 here其中很多都是基于 Shawn Allen 精彩的回答 here 。

目前，您需要提供一个数组，以便 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;
    });