Javascript 交互式d3邮政编码choropleth-佤邦

正如标题所说，我正在尝试使用d3制作一个交互式choropleth。我发现了一个有趣的例子，我正试图复制到另一个位置。 具体地说，我试图在邮政编码的层面上描绘华盛顿州

我已经添加了我目前拥有的可能被编辑的内容，基于此，这里是显示最终结果的实况

这适用于加利福尼亚州，但是当将邮政编码改为华盛顿州时，该图不起作用。也没有显式错误。错误可能是由于topojson中存在差异

California topojson:
    {
      "type": "Topology",
      "objects": {
        "zip": {
          "type": "GeometryCollection",
          "crs": {
            "type": "name",
            "properties": {
              "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
            }
          },
          "geometries": [
            {
              "type": "Polygon",
              "properties": {
                "zipcode": 94601
              },
              "arcs": [
                [
                  0,
                  1,
                  2,
                  3,
                  4,
                  5
                ]
              ]
            }

这是，这是

下面是为每个topojson打印的第一个值

California topojson:
    {
      "type": "Topology",
      "objects": {
        "zip": {
          "type": "GeometryCollection",
          "crs": {
            "type": "name",
            "properties": {
              "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
            }
          },
          "geometries": [
            {
              "type": "Polygon",
              "properties": {
                "zipcode": 94601
              },
              "arcs": [
                [
                  0,
                  1,
                  2,
                  3,
                  4,
                  5
                ]
              ]
            }

华盛顿：

{
  "type": "Topology",
  "objects": {
    "tl_2010_53_zcta510": {
      "type": "GeometryCollection",
      "crs": {
        "type": "name",
        "properties": {
          "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
      },
      "geometries": [
        {
          "type": "Polygon",
          "properties": {
            "zipcode": "98822"
          },
          "arcs": [
            [
              0,
              1,
              2,
              3
            ],
            [
              4
            ]
          ]
        }

下面是

main.js

函数。我认为这和检查两个topojson文件有助于找到问题所在。基本上唯一的变化是topojson文件，那么

main.js

函数应该反映这些变化

另外，“fake_data.csv”只表示一系列zipcode:value对，如下所示：

zip,values
98001,1
98002,1
98003,1
98004,2
98005,2
98006,2

main.js

    (function chart() {

  var width = 1000,
      height = 1200,
      centered;

  var rateById = d3.map();

  var quantize = d3.scale.quantize()
      .domain([0, 100000])
      .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

  var projection = d3.geo.albersUsa()
      .scale(6000)
      .translate([2300, 680]);

  var path = d3.geo.path()
      .projection(projection);

  var svg = d3.select("#ca-chart").append("svg")
      .attr("width", width)
      .attr("height", height);

  var tooltip = d3.select("#ca-chart").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

  svg.append("rect")
      .attr("class", "background")
      .attr("width", width)
      .attr("height", height)
      .on("click", clicked);

  var g = svg.append("g");

// These are the two lines that are different from the working example
  queue()
      .defer(d3.json, "https://gist.githubusercontent.com/martinbel/e14cd6ecd565914f53af/raw/e3a3a8332c20fe3cee6d7fd2a9ac01ad43f7aaa4/WA.topojson")
      .defer(d3.csv, "fake_data.csv", function(d) { rateById.set(d.zip.toString(), +d.values); })
      .await(ready);

  function ready(error, zipcode) {
    var features = topojson.feature(zipcode, zipcode.objects.tl_2010_53_zcta510).features;

    g.append("g")
        .attr("class", "state")
      .selectAll("path")
        .data(topojson.feature(zipcode, zipcode.objects.tl_2010_53_zcta510).features)
      .enter().append("path")
        .attr("d", path)
        .attr("stroke", "#333")
        .attr("stroke-width", "1.5px")
        .attr("fill", "#fff");

    g.append("g")
        .attr("class", "zipcodes")
      .selectAll("path")
        .data(features)
      .enter().append("path")
        .attr("class", getColorClass)
        .attr("d", path)
        .on("click", clicked)
        .on("mouseover", mouseover)
        .on("mouseout", mouseout);
  }

  function getColorClass(d) {
    return quantize(rateById.get(d.properties.zipcode));
  }

  function getPopulation(d) {
    return rateById.get(getZip(d)).toString();
  }

  function getZip(d) {
    return d && d.properties ? d.properties.zipcode : null;
  }

  function mouseout(d) {
    d3.select(this)
        .style("stroke", null);

    tooltip.transition()
        .duration(250)
        .style("opacity", 0);
  }

  function mouseover(d) {
    d3.select(this.parentNode.appendChild(this))
        .style("stroke", "#F00");

    tooltip.transition()
        .duration(250)
        .style("opacity", 1);

    tooltip
        .html("<p><strong>Zipcode: " + getZip(d) + "<br>Population: "  + getPopulation(d) + "</strong></p>")
        .style("left", (d3.event.pageX + 25) + "px")
        .style("top",  (d3.event.pageY - 28) + "px");
    }

  function clicked(d) {
    var x, y, k;

    if (d && centered !== d) {
      var centroid = path.centroid(d);
      x = centroid[0];
      y = centroid[1];
      k = 8;    // control zoom depth
      centered = d;
    } else {
      x = width / 2;
      y = height / 2;
      k = 1;
      centered = null;
    }

    g.selectAll("path")
        .classed("active", centered && function(d) { return d === centered; });

    g.transition()
        .duration(750)
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
        .style("stroke-width", 1.5 / k + "px");
  }

  d3.select(self.frameElement).style("height", height + "px");

}());

---

问题是您正在活动查看区域之外绘制路径。尝试将此作为您的

投影

，您将看到路径

var projection = d3.geo.albersUsa()
  // .scale(6000)
  // .translate([2300, 680]);

---

您必须编辑华盛顿的缩放/转换…可能有助于将svg

宽度
和
高度
设置为ginormous（10000px左右），这样您就可以看到地图的最终位置。
问题是您正在活动查看区域之外绘制路径。尝试将此作为您的
投影
，您将看到路径

var projection = d3.geo.albersUsa()
  // .scale(6000)
  // .translate([2300, 680]);

您必须编辑华盛顿的缩放/转换…这样做可能有助于使svg
宽度
和
高度
ginormous（10000px左右），这样您就可以看到地图的最终位置。
这解决了显示地图和显示地图的问题，而无需手动修改参数。实际上，诀窍是使用支持
.center（）
方法的投影，
albersUsa
不支持。这样，对比例参数进行排序就容易多了

var projection = d3.geo.mercator()
            .center([-120.574951, 47.361153])
            .scale(5000)
            .translate([(width) / 2, (height)/2]);

之后出现了一些其他问题。
这解决了显示地图和显示地图的问题，而无需手动修改参数。实际上，诀窍是使用支持
.center（）
方法的投影，
albersUsa
不支持。这样，对比例参数进行排序就容易多了

var projection = d3.geo.mercator()
            .center([-120.574951, 47.361153])
            .scale(5000)
            .translate([(width) / 2, (height)/2]);

在此之后，出现了一些其他问题。
Marbel，从你的问题来看，我并不清楚你的问题是什么。你能详细解释一下吗？我在问题中补充了更多细节。让我知道这是否有助于理解问题Marbel，从你的问题来看，我并不清楚你的问题是什么。你能详细解释一下吗？我在问题中补充了更多细节。如果这有助于理解问题，请告诉我是否有更好的方法？理想情况下，我不想手动更改参数。没有更好的方法吗？理想情况下，我不想手动更改参数。