Question

我是D3新手并使用Bostock chloropleth地图之一（https://bl.ocks.org/mbostock/4060606）。我试图将多个地图添加到HTML页面。我的代码不再是不同的地图，而是重复相同的地图。关于如何纠正这个问题的任何想法？

<style>
counties {
  fill: none;
}

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

.q0-25 { fill:#40004b; }
.q1-25 { fill:#40004b; }
.q2-25 { fill:#9970ab; }
.q3-25 { fill:#9970ab; }
.q4-25 { fill:#c2a5cf; }
.q5-25 { fill:#fee08b; }
.q6-25 { fill:#a6dba0; }
.q7-25 { fill:#a6dba0; }
.q8-25 { fill:#a6dba0; }
.q9-25 { fill:#1b7837; }
.q10-25 { fill:#1b7837; }

body {
    width: 100%;
    height: 100%;
    font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#4D0788; 

}
</style>
<body>
<div id="area1"></div>
<div id="area2"></div>

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 925,
    height = 300;

var rateById = d3.map();

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

var projection = d3.geo.albersUsa()
    .scale(700)
    .translate([width / 2, height / 2]);

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

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

queue()
    .defer(d3.json, "us.json")
    .defer(d3.tsv, "county2.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);

function ready(error, us) {
  if (error) throw error;

  svg1.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
      .attr("class", function(d) { return quantize(rateById.get(d.id)); })
      .attr("d", path);

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

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

queue()
    .defer(d3.json, "us.json")
    .defer(d3.tsv, "county1.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready2);

function ready2(error, us) {
  if (error) throw error;

  svg2.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
      .attr("class", function(d) { return quantize(rateById.get(d.id)); })
      .attr("d", path);

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

</script>
</body>

d3在一页上添加多个chloropleth地图

0 个答案: