Question

我正在尝试连接我的两个json文件以显示我的等值区域地图上的信息。我有地图渲染，但在将第二个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";
}

simpleGA.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"; }));


 };

Answer 1

创建一个空字典，其id为key，未量化为value：

var newDict = {};

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

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

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]); })

随时重新添加null条件以检查id是否存在。

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

还有一个更加整洁的量化实现：

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

缺少d3连接等值线图中的数据的步骤

1 个答案: