Javascript 如何对我的json数据文件使用quantize函数

我一直在遵循这个链接中使用D3的choropleth指南。

我没有失业，而是有一个json文件，其中列出了每个州每个县的车祸数量。此json文件的格式为

 {
    "id":1001,
    "crashTotal":2
  },

这是针对json文件中的每个元素的；每个县一个。ID是州+县FIPS代码，crashTotal是其名称

我一直在密切关注示例代码，并讨论了quantize函数

// quantize function takes a data point and returns a number
// between 0 and 8, to indicate intensity, the prepends a 'q'
// and appends '-9'

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

对我来说，数据是一个变量集，等于crasks.json文件。我不明白为什么我不能根据量化函数使用数据中的crashTotal值

当我尝试使用以下代码时

~~data[d.id] or +data[d.id]

我得到0或NaN。为什么会这样？我对使用d3还比较陌生，所以我不确定这是怎么回事。谢谢

我的代码与示例代码非常接近，但是使用了从人口普查shapefile转换而来的我自己的美国国家和州JSON文件。有人能帮忙吗

编辑：我想我应该多解释一下这个问题。这不是使用量化函数或d3尺度量化之间的问题，而是如何访问我的数据来为每个县着色。如上所述，我的数据文件是上述格式的JSON。下面是我如何设置数据以及如何调用quantize

d3.json("Crashes.json", function(crashes) {

    max = +crashes[0].crashTotal;
    min = +crashes[0].crashTotal;
    maxFIPS = +crashes[0].id;
    minFIPS = +crashes[0].id;
    for(i = 0; i < crashes.length; i++) {
        if(+crashes[i].crashTotal > max) {
            maxFIPS = +crashes[i].id;
            max = +crashes[i].crashTotal;
        }
        if(+crashes[i].crashTotal < min) {
            minFIPS = +crashes[i].id;
            min = +crashes[i].crashTotal;
        }
    }

    data=crashes;

    //for(i = 0; i < data.length; i++) {
    //  document.writeln(data[i].id + " " + data[i].crashTotal);
//  }

    counties.selectAll("path")
        .attr("class", quantize);
        //.text(function (d){return "" + d.value;});

    //console.log("maxFIPS:" + maxFIPS + " minFIPS:" + minFIPS + "\n" + "max:" + max + " min:" + min);
});

function quantize(d) {

return "q" + Math.min(8, ~~data[d.id]) + "-9";
}

这应该让我的地图正确的颜色，但我的地图保持白色。我可以通过测试quantize来确认，我从CSS文件中获得了正确的类名

console.log(quantize(crashDataMap.get(1001).crashTotal)); //returns q0-9

多谢你的帮助。谢谢

EDIT2[3-6-2014]我决定将我所有的代码都发布在这里，希望有人能理解为什么这不起作用

//CSS or <style></style> bracket
svg {
        background: white;
    }

    path {
        fill: none;
        stroke: #000;
        stroke-width: 0.1px;
    }

    #counties path{

        stroke: #000;
        stroke-width: 0.25px;
    }


    #states path{
        fill: none;
        stroke: #000;
        stroke-width: 0.5px;
    }

.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)}

//Crashes.js file
    var width = 960
    var height = 500;

    var data;
    var crashDataMap;
    var quantize;

    var path = d3.geo.path();

    var zoom = d3.behavior.zoom()
        .on("zoom", zoomed);

    var svg = d3.select("#chart").append("svg")
        .attr("width", width)
        .attr("height", height)
        .call(zoom)
        .append("g");


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

    var states = svg.append("g")
        .attr("id", "states");


    d3.json("county.json", function(county) {
        var countyFeatures = topojson.feature(county, county.objects.county);
        counties.selectAll("path")
            .data(countyFeatures.features)
          .enter().append("path")
            .attr("d", path);
    }); 

    d3.json("state.json", function(state) {
        var stateFeatures = topojson.feature(state, state.objects.state);
        states.selectAll("path")
            .data(stateFeatures.features)
          .enter().append("path")
            .attr("d", path);   

    });


    d3.json("Crashes.json", function(crashes) {
            crashDataMap = d3.map();

            crashes.forEach(function(d) {crashDataMap.set(d.id, d);});

            data = crashDataMap.values();
            quantize = d3.scale.quantize()
            .domain(d3.extent(data, function(d) {return d.crashTotal;}))
            .range(d3.range(9).map(function(i) {return "q" + i + "-9"}));

            /*
            for(i  = 0; i < data.length; i++) {
                console.log(quantize(crashDataMap.get(data[i].id).crashTotal));
            }   
            */

            counties.selectAll("path")
                .attr("class", function(d) {return quantize(crashDataMap.get(d.id).crashTotal);});

        });

            function zoomed() {
                svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            };

//CSS或括号
svg{
背景：白色；
}
路径{
填充：无；
行程：#000；
笔划宽度：0.1px；
}
#县道{
行程：#000；
笔划宽度：0.25px；
}
#状态路径{
填充：无；
行程：#000；
笔划宽度：0.5px；
}
.Blues.q0-9{fill:rgb（247251255）}
.Blues.q1-9{fill:rgb（22235247）}
.Blues.q2-9{填充：rgb（198219239）}
.Blues.q3-9{fill:rgb（15802225）}
.Blues.q4-9{fill:rgb（107174214）}
.Blues.q5-9{fill:rgb（66146198）}
.Blues.q6-9{fill:rgb（3313181）}
.Blues.q7-9{fill:rgb（8,81156）}
.Blues.q8-9{fill:rgb（8,48107）}
//crasks.js文件
可变宽度=960
var高度=500；
var数据；
var-crashDataMap；
var量化；
var path=d3.geo.path（）；
var zoom=d3.behavior.zoom（）
。打开（“缩放”，缩放）；
var svg=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.呼叫（缩放）
.附加（“g”）；
var countries=svg.append（“g”）
.attr（“id”、“县”）
.attr（“类”、“蓝色”）；
var states=svg.append（“g”）
.attr（“id”，“states”）；
d3.json（“country.json”，函数（country）{
var countyFeatures=topojson.feature（county，county.objects.county）；
countries.selectAll（“路径”）
.数据（countyFeatures.features）
.enter（）.append（“路径”）
.attr（“d”，路径）；
}); 
d3.json（“state.json”），函数（state）{
var stateffeatures=topojson.feature（state，state.objects.state）；
states.selectAll（“路径”）
.data（stateffeatures.features）
.enter（）.append（“路径”）
.attr（“d”，路径）；
});
d3.json（“crasks.json”），函数（crasks）{
crashDataMap=d3.map（）；
forEach（函数（d）{crashDataMap.set（d.id，d）；}）；
data=crashDataMap.values（）；
quantize=d3.scale.quantize（）
.domain（d3.extent（数据，函数（d）{return d.crashTotal；}））
.range（d3.range（9.map）（函数（i）{return“q”+i+“-9”}））；
/*
对于（i=0；i

看看我在哪里生成了县的路径。在

.enter（）之后追加（“路径”）

语句，如果我输入代码

.attr（“class”，“q8-9）

，它会将每个县的颜色设置为定义为q8-9的方案

---

如果我要调用

countries.selectAll（“path”）.attr（“class”，“q8-9”）

在代码括号之外的任何地方，都不会发生任何事情；地图保持白色。这让我感到困扰，因为我显然不知道为什么会发生这种情况。我可以验证path元素在县和州都存在。

要解释原始代码中发生了什么：

您链接到的教程使用了两个数据文件，一个用于地图，一个用于数据值。不幸的是，它似乎没有包含到实际使用的数据文件的链接，但包含了它们的两个JSON。县有一个“id”属性，该属性似乎用作第二个JSON数据文件中的键。即，第二个文件（

数据

）的格式必须为：

{
  "1001":   ".097",
  "1003":   ".091",
  "1005":   ".134",
  /*...*/
}

这与中使用的数据结构不同，后者使用.tsv文件作为失业数据，然后使用该文件生成hashmap数据字典

var rateById = d3.map();
queue.defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
//this is equivalent to 
/*
  d3.tsv("unemployment.tsv", 
         function(d) { rateById.set(d.id, +d.rate); }, 
        readyFunction );
*/
//except that the readyFunction is only run when *both* data files are loaded.

//When two functions are given as parameters to d3.tsv, 
//the first one is called on each row of the data.
//In this case, it adds the id and rate as a key:value pair to the hashmap

这两个示例都以一个数据结构结束，其中id值是可用于获取适当数据值的键。相反，您的数据位于一个未知数组中，id值只是另一个属性，而不是键。这就是为什么

data[d.id]

为您返回了一个错误--它不是获取与该id匹配的数据号，而是在与id号相等的索引处获取数组的一个元素。这要么返回一个对象，该对象在转换为数字时变为

NaN

，

var rateById = d3.map();
queue.defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
//this is equivalent to 
/*
  d3.tsv("unemployment.tsv", 
         function(d) { rateById.set(d.id, +d.rate); }, 
        readyFunction );
*/
//except that the readyFunction is only run when *both* data files are loaded.

//When two functions are given as parameters to d3.tsv, 
//the first one is called on each row of the data.
//In this case, it adds the id and rate as a key:value pair to the hashmap

crashDataArray.forEach( function(d){ crashDataMap.set( d.id, d) });