Question

我正在尝试使用d3.js提供的示例来学习构建等值区域地图。

我一直收到错误：当我从示例中的.tsv文件切换到我的版本中的.json文件时，“TypeError：congress.forEach不是函数”。这是我正在使用的代码：

    <script type="text/javascript">
var width = 960,
        height = 500;

var path = d3.geo.path();

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

var g = svg.append("g")
        .call(d3.behavior.zoom()
        .scaleExtent([1, 10])
        .on("zoom", zoom));

d3.json("us-10m.json", function (error, us) {
    d3.json("https://www.govtrack.us/api/v2/role?current=true", function (error,     congress) {
        var memberId = {};

        congress.forEach(function (d) {  //TypeError:congress.forEach is not a function
            memberId[d.id] = +d.id;
        });

        g.append("g")
                .attr("class", "states")
                .selectAll("path")
                .data(topojson.feature(us, us.objects.states).features)
                .enter().append("path")
                .attr("d", path)
                .style("fill", function (d) {
                    return color(memberId[d.id]); // <-C
                });

        g.append("path")
                .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
                .attr("class", "states")
                .attr("d", path);
    });
});

function zoom() {
    g.attr("transform", "translate("
            + d3.event.translate
            + ")scale(" + d3.event.scale + ")");
}

感谢任何帮助。抱歉，我没有把它放在jsfiddle上，但由于跨域问题我无法连接到.us-10m.json。

谢谢你，汤姆

Answer 1

congress不是数组 - 它是一个对象：

{
  meta: {
    limit: 100,
    offset: 0,
    total_count: 540
  },
  objects: [ {...}, {...}, {...}, {...} ]
}

需要迭代congress.objects：

congress.objects.forEach(function() {...})

d3.js choropleth map示例错误

1 个答案: