2

我正在尝试连接我的两个 json 文件以在我的 choropleth 地图上显示信息。我有地图渲染，但是在将我的第二个 json 文件连接到地图文件时我被卡住了。这两个文件都包含所有项目的 id，但 id 不在对象之前，它在里面，所以我不知道如何获取它。

这是我目前拥有的：

var data; // loaded asynchronously
var width = 600;
var height = 600;

var projection = d3.geo.albers()
                 //.center([-84.36322, 32.397649]);
               .translate([-1000,-200])
               .scale([6000]);

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

var svg = d3.select("#chart")
.append("svg:svg");

var counties = svg.append("svg:g")
.attr("id", "counties")
.attr("class", "Blues");


d3.json("data/myData/simpleGA.json", function(json) {
 counties.selectAll("path")
  .data(json.features)
.enter().append("svg:path")
  .attr("class", data ? quantize : null)
  .attr("d", path);
});

d3.json("data/myData/lotteryMapNum.json", function(json) {

data = json;

counties.selectAll("path")
  .attr("class", quantize);
 });

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

简单GA.json

 {
  "type": "FeatureCollection",

  "features": [
    { "type": "Feature", "id": 0, "properties": { "NAMELSAD10": "Lanier County"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.04292, 30.947296 ], [ -83.05332, 30.94753 ],] ] } }
 ]
 }

lotteryMapNum.json

[
 {"COUNTY":"Lanier",
  "hopeDollars":12921240,
  "id":"0"}
]

工具提示的新代码：

var newDict = {};


d3.json("data/myData/lotteryMapNum.json", function(data) {
data.forEach(function(d) { newDict[d.id] = +d.hopeDollars;})
data.forEach(function(d) { newDict[d.COUNTY] = +d.COUNTY;});

d3.json("data/myData/simpleGA.json", function(json) {
    counties.selectAll("path")
    .data(json.features)
    .enter().append("svg:path")
    .attr("class", function(d) { return quantize(newDict[d.id]);})
    .attr("d", path)
    .call(d3.helper.tooltip()
        //.attr({class: function(d, i) { return d + ' ' +  i + ' A'; }})
        .text(function(d){ return 'value: '+newDict[d.id]+newDict[d.COUNTY]; })
    )
    .on('mouseover', function(d){ d3.select(this).style({fill: 'green', stroke: 'red'});     })
    .on('mouseout', function(d){ d3.select(this).style({fill: '', stroke: ''}); });

 });

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


 };
4

1 回答 1

4

制作一个以 id 为键、未量化为值的空字典：

var newDict = {};

d3.json("data/myData/lotteryMapNum.json", function(data) {
    data.forEach(function(d) { newDict[d.id] = +d.hopeDollars; }); 
});

然后，在设置路径类时使用 quantize 函数：

d3.json("data/myData/simpleGA.json", function(json) {
   counties.selectAll("path")
  .data(json.features)
  .enter().append("svg:path")
  .attr("class", function(d) { return quantize(newDict[d.id]); })

随时添加您的空条件以检查 id 是否存在。

基本上，这将只使用检查每个路径 id (d.id) 的字典值，返回量化值，并相应地设置类。

还有一个更简洁的 quantize 实现：

var quantize = d3.scale.quantize()
  .domain([0, 1])
  .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
于 2013-07-29T18:57:01.463 回答