Javascript 旋转球体在D3中旋转

我想在d3中制作一个有旋转球体的chorolpleth。我可以把地球仪渲染得很好，但是我不能让国家用合适的颜色比例来填充

更详细的解释。我基本上是从Mike Bostock关于旋转地球的代码开始的，在这里可以找到：

我从外部csv中读取了大约85个国家的一些经济数据。我正试图根据csv中的值将颜色映射到各个国家。这里还有另一个博斯托克的choropleth例子（静态的，仅限于美国，在SO d3问题中经常提到）：

我最终得到的是地球表面的纯白国家。这不是我想要的

我将ISO 3166-1数字代码添加到我的csv中，以便将它们与topojson数据中的相同ID进行匹配。所以我的csv看起来像：

country     id      curracct
Germany     276     260.9
Sweden      752     7.24
Etc.

我的第一个想法是创建一个变量，它是一个函数，它通过topojson数据中的“国家”长度，找到id与csv国家id相等的国家，然后将缩放颜色分配给它们。然后我将“context.fillStyle”设置为该变量/函数。那没用

然后我将“context.fillStyle”直接放在函数内部（这是当前编写的代码）。那也没用

再一次，我试图让csv中有数据的85个左右的国家按照我设置的比例在旋转地球仪的正面显示彩色编码

我的猜测是，关于变量“context”及其处理方式，我有一些不理解的地方。如果这是.style（“fill”，[将我的函数放在这里映射颜色]）语法，我就可以了。有人有什么想法吗

我不是编码员。事实上，我想我是在写代码。也许我应该说我是一个自学成才的程序员，而且大部分都很糟糕。尽管通过示例、JS控制台和其他问题，我通常可以找出错误所在。这一次我碰到了一堵墙。感谢您的帮助。谢谢

var width = 560,
    height = 560,
    speed = -1e-2,
    start = Date.now();

var sphere = {type: "Sphere"};

var color = d3.scale.quantize()
    .range(["#ffffd9", "#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]);

var projection = d3.geo.orthographic()
    .scale(width / 2.1)
    .clipAngle(90)
    .translate([width / 2, height / 2]);

var graticule = d3.geo.graticule();

var canvas = d3.select("body")
    .append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

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

queue()
    .defer(d3.json, "/d3/world-110m.json")
    .defer(d3.csv, "trade.csv")
    .await(globeTrade);

function globeTrade(error, topo, data) {
      var land = topojson.feature(topo, topo.objects.land),
          countries = topojson.feature(topo, topo.objects.countries),
          borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; }),
    grid = graticule();

    color.domain([0, d3.max(data, function(d){return d.curracct})]);


    d3.timer(function() {
     var λ = speed * (Date.now() - start),
     φ = -15;


    context.clearRect(0, 10, width, height);

    context.beginPath();
    path(sphere);
    context.lineWidth = 2.5;
    context.strokeStyle = "#000";
    context.stroke();
    context.fillStyle = "#fff";
    context.fill();

    context.save();
    context.translate(width / 2, 0);
    context.scale(-1, 1);
    context.translate(-width / 2, 0);
    projection.rotate([λ + 180, -φ]);

    context.beginPath();
    path(land);
    context.fillStyle = "#ddd" //changed to a nuetral gray
    context.fill();

    context.beginPath();
    path(grid);
    context.lineWidth = .5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();

    context.beginPath();
    path(borders);
    context.lineWidth = .25;
    context.strokeStyle="#fff";
    context.stroke();


    context.restore();
    projection.rotate([λ, φ]);

    context.beginPath();
    path(grid);
    context.lineWidth = .5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();

    // This is where I am failing
    context.beginPath();
    path(countries);
    function render (d){
        for (var j = 0; j < countries.features.length; j++) {
            if (d.id == countries.features[j].id) {
                context.fillStyle = color(d.curracct)
                }
            else {
                context.fillStyle = "#737368"; //left Bostock's color for now
            }

        }

    }   
    context.fill();
    context.lineWidth = .1;
    context.strokeStyle = "#000"; 
    context.stroke();       
});

data.forEach(function(d, i) {
    d.curracct = +d.curracct;
    d.id = +d.id;
  });

d3.select(self.frameElement).style("height", height + "px");

    </script>
</body>

var宽度=560，
高度=560，
速度=-1e-2，
开始=日期。现在（）；
var sphere={type:“sphere”}；
var color=d3.scale.quantize（）
.范围（[“ffffd9”、“edf8b1”、“c7e9b4”、“7fcdbb”、“41b6c4”、“1d91c0”、“225ea8”、“253494”、“081d58”）；
var projection=d3.geo.orthographic（）
.刻度（宽度/2.1）
clipAngle先生（90）
.翻译（[宽度/2，高度/2]）；
var graticule=d3.geo.graticule（）；
var canvas=d3.选择（“主体”）
.append（“画布”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var context=canvas.node（）.getContext（“2d”）；
var path=d3.geo.path（）
.投影（投影）
.语境（语境）；
队列（）
.defer（d3.json，“/d3/world-110m.json”）
.defer（d3.csv，“trade.csv”）
.等待（环球旅行）；
函数globeTrade（错误、拓扑、数据）{
var land=topojson.feature（topo，topo.objects.land），
countries=topojson.feature（topo，topo.objects.countries），
borders=topojson.mesh（topo，topo.objects.countries，函数（a，b）{返回a！==b；}），
网格=分划（）；
域（[0，d3.max（数据，函数（d）{return d.curracct}）]；
d3.定时器（函数（）{
varλ=速度*（Date.now（）-开始），
φ = -15;
clearRect（0，10，宽度，高度）；
context.beginPath（）；
路径（球面）；
context.lineWidth=2.5；
context.strokeStyle=“#000”；
stroke（）；
context.fillStyle=“#fff”；
context.fill（）；
context.save（）；
上下文。翻译（宽度/2，0）；
背景量表（-1,1）；
translate（-width/2，0）；
投影旋转（[λ+180，-φ]）；
context.beginPath（）；
路(地);；
context.fillStyle=“#ddd”//更改为数字灰色
context.fill（）；
context.beginPath（）；
路径（网格）；
context.lineWidth=.5；
context.strokeStyle=“rgba（119119.5）”；
stroke（）；
context.beginPath（）；
道路（边界）；
context.lineWidth=.25；
context.strokeStyle=“#fff”；
stroke（）；
restore（）；
投影旋转（[λ，φ]）；
context.beginPath（）；
路径（网格）；
context.lineWidth=.5；
context.strokeStyle=“rgba（119119.5）”；
stroke（）；
//这就是我失败的地方
context.beginPath（）；
路径（国家）；
函数渲染（d）{
对于（var j=0；j