d3.js choropleth量化问题_D3.js_Maps

d3.js choropleth量化问题

d3.js maps

d3.js choropleth量化问题,d3.js,maps,D3.js,Maps,在尝试量化某些数据时，我遇到以下错误类型错误：e未定义 js/d3.v3.min.js 第3行当包含此行时，它似乎会出现 .data(us.features) 我的路线有问题吗 <!DOCTYPE html> <meta charset="utf-8"> <style> body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } path { f

在尝试量化某些数据时，我遇到以下错误

类型错误：e未定义 js/d3.v3.min.js 第3行

当包含此行时，它似乎会出现

.data(us.features)

我的路线有问题吗

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
 margin: 0;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
path {
  fill: none;
  stroke: black;
  stroke-linejoin: round;
  stroke-width: 1.5px;
}
span.btn
{
border:1px solid #d0d0d0;
background-color:silver;
cursor:pointer;
}
#container {
  padding:0px;
  border:2px solid #d0d0d0;
  border-radius: 5px;
  height:330px;
  width:600px;
}
.Blues .q0-9{fill:rgb(247,251,255)}
.Blues .q1-9{fill:rgb(222,235,247)}
.Blues .q2-9{fill:rgb(198,219,239)}
.Blues .q3-9{fill:rgb(158,202,225)}
.Blues .q4-9{fill:rgb(107,174,214)}
.Blues .q5-9{fill:rgb(66,146,198)}
.Blues .q6-9{fill:rgb(33,113,181)}
.Blues .q7-9{fill:rgb(8,81,156)}
.Blues .q8-9{fill:rgb(8,48,107)}

.RYG .q0-17{fill:rgb(139,0,0)}
.RYG .q1-17{fill:rgb(154,32,0)}
.RYG .q2-17{fill:rgb(168,64,0)}
.RYG .q3-17{fill:rgb(183,96,0)}
.RYG .q4-17{fill:rgb(197,128,0)}
.RYG .q5-17{fill:rgb(212,159,0)}
.RYG .q6-17{fill:rgb(226,191,0)}
.RYG .q7-17{fill:rgb(241,223,0)}
.RYG .q8-17{fill:rgb(255,255,0)}
.RYG .q9-17{fill:rgb(223,239,0)}
.RYG .q10-17{fill:rgb(191,223,0)}
.RYG .q11-17{fill:rgb(159,207,0)}
.RYG .q12-17{fill:rgb(128,192,0)}
.RYG .q13-17{fill:rgb(96,176,0)}
.RYG .q14-17{fill:rgb(64,160,0)}
.RYG .q15-17{fill:rgb(32,144,0)}
.RYG .q16-17{fill:rgb(0,128,0)}
</style>
<body>
<script src="js/d3.v3.min.js"></script>
<!--<script src="js/queue.v1.min.js"></script>-->
<script src="js/topojson.v1.min.js"></script>
<div style="margin:10px 10%;">
    <div id="container"></div>
    <span id="btnCenter" class="btn" onClick="javascript:reset();">Center</span>
</div>
<script>

var width = Math.min(960, document.getElementById('container').offsetWidth),
    height = Math.min(500, document.getElementById('container').offsetHeight);

var projection = d3.geo.mercator()
    .scale((1 << 12) / 2.25 / Math.PI)
    .translate([width / 2+40, height / 2+30]);

var center = projection([-100, 40]);

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

var zoom = d3.behavior.zoom()
    .scale(projection.scale() * 2 * Math.PI)
    .scaleExtent([1 << 11, 1 << 14])
    .translate([width - center[0], height - center[1]])
    .on("zoom", zoomed);
// With the center computed, now adjust the projection such that
// it uses the zoom behavior’s translate and scale.
projection
    .scale(1 / 2 / Math.PI)
    .translate([0, 0]);

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

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

// create a container for counties
var counties = svg.append("g")
.attr("id", "counties")
.attr("class", "Blues");

// load the unemployment by county data
d3.json("data/unemployment.json", function(json) {
  data = json;

  // for each county, set the css class using the quantize function
  // (an external CSS file contains the css classes for each color in the scheme)
  counties.selectAll("path")
      .attr("class", quantize);
});

d3.json("data/usa.json", function(error, us) {
  svg.call(zoom);
  vector.attr("d", path(topojson.mesh(us, us.objects.collection)));
  zoomed();

  counties.selectAll("path")
    .data(us.features)
    .enter().append("path")
    .attr("class", data ? quantize : null)
    .attr("d", path)
    ;
});

function quantize(d) {
  return "q" + Math.min(8, ~~(data[d.id] * 9 / 12)) + "-9";
}

function zoomed() {
  vector
      .attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")
      .style("stroke-width", 1 / zoom.scale());
}

function reset(){
    projection.translate([width / 2, height / 2]);

    // Transition to the new projection.
    vector.selectAll("path").transition()
      .duration(750)
      .attr("d", path);
}
</script>

听起来您的TopoJSON有问题。但是它似乎正确地显示了县。所以我不确定这是否是问题所在。如果没有完整的示例，我真的无法判断。当我将d3.min.js切换为非最小值时，我确实收到了不同的错误。TypeError:groupData未定义。如果没有完整的示例，我只能猜测。

{"type":"Topology","transform":{"scale":[0.0013001464054222872,0.0009059820997767661],"translate":[-178.21759836236586,18.92178634508703]},"objects":{"collection":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0,1,2,3]],"id":0},{"type":"Polygon","arcs":[[4,5,6,7]],"id":1},