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

我已经把你的小提琴碰到了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;
    });

使用geojson对象中的属性创建包含d3.js的表

1 个答案: