Javascript 如何根据d3中数据的id创建自己的色标？

我正在尝试根据数据集的ID添加自定义颜色比例。我希望每个大陆都有自己的颜色。当前，颜色比例由设置

var fill = d3.scale.category20(); 

还有代码

n.append("circle")
              .attr("r",  function(d) { return d.r; })
              .style("fill", function(d) { return fill(d.id); })

基于上述颜色比例设置颜色。我试图根据数据的ID，用自己的十六进制代码创建自己的色标。我该怎么做？我试图将ID更改为类别，但它弄乱了我的动画。如果您想自己玩代码，这里是指向CodePen上代码的链接：（）

---

有几种方法可以做到这一点：

替换第39行

var fill=d3.scale.category20（）带有：

var fill=新映射([
[0，#3182bd']，
[1，#9ecae1']，
[2，#fd8d3c']，
[3，#fdae6b']，
[4'#31a354']
]);

第98行

填充（d.id）

使用此选项（显示第96-98行）：

n.append（“圆”）
.attr（“r”，函数（d）{返回d.r；}）
.style（“fill”，函数（d）{返回fill.get（d.id）；}）

（您还可以使用对象文本

var-fill={…}

或数组

var-fill=[…]

并使用

fill[d.id]

访问该数组）

您可以编写一个新的填充函数：

var-fill=（id）=>{
常数arr=[
"3182bd",，
"9ecae1",，
“#fd8d3c”，
"fdae6b",，
"31a354"
];
const idx=parseInt（id）%arr.length；
返回arr[idx]；
};

您的第98行将保持不变（

line（d.id）

）

您可以使用CSS类：

（我的首选方法是让所有内容都由数据驱动）您可以修改数据结构，以便在其中定义颜色：

---

尝试使用d3.scale.ordinal（）函数的范围和域：

var fill=d3.scale.ordinal（）.domain（[0,4]）.range（[“#3182bd”、“#9ecae1”、“#fd8d3c”、“#fdae6b”、“#31a354”）
  var data = [
      //Americas
      {"id": "0", "name": "U.S.A", "r": 62.20, "value": 22.20 },
      {"id": "0", "name": "Brazil", "r": 42.06, "value": 2.06 },
      {"id": "0", "name": "Canada", "r": 41.83, "value" :1.83 },
      {"id": "0", "name": "Mexico", "r": 41.3, "value": 1.30 },
      {"id": "0", "name": "Argentina", "r": 40.52, "value": 0.52 },
      
      //Asia
      {"id": "1", "name": "China", "r": 55.47, "value": 15.47 },
      {"id": "1", "name": "Japan", "r": 45.50, "value": 5.50 },
      {"id": "1", "name": "India", "r": 43.26, "value": 3.26 },
      {"id": "1", "name": "South Korea", "r": 41.74, "value": 1.74 },
      {"id": "1", "name": "Russia", "r": 41.67, "value": 1.67 },
      {"id": "1", "name": "Indonesia", "r": 41.21, "value": 1.21},
      {"id": "1", "name": "Turkey", "r": 40.81, "value": 0.81 },
    
      //Europe
      {"id": "2", "name": "Germany", "r": 44.16, "value": 4.16 },
      {"id": "2", "name": "United Kingdom", "r": 42.93, "value": 2.93},
      {"id": "2", "name": "Italy", "r": 42.09, "value": 2.09 },
      {"id": "2", "name": "Spain", "r": 41.50, "value": 1.50 },
      {"id": "2", "name": "Netherlands", "r": 40.95, "value": 0.95 },
      {"id": "2", "name": "Switzerland", "r": 40.74, "value": 0.74 },
      
      //Oceania
      {"id": "3", "name": "Australia", "r": 41.48, "value": 1.48 },
      {"id": "3", "name": "New Zealand", "r": 40.207, "value": 0.207 },
      
      //Africa 
      {"id": "4", "name": "Saudi Arabia", "r": 40.79, "value": 0.79},
      {"id": "4", "name": "South Africa", "r": 40.351, "value": 0.351},
      
    ];
    
    var width = window.innerWidth,
        height = 550;
    
    var fill = d3.scale.category20();
            
    
    var nodes = [], labels = [],
        foci = [{x: -100, y: 150}, {x: 350, y: 150}, {x: 200, y: 150}, {x: 400, y: 150}, {x: 500, y: 150}];
    
    var svg = d3.select("body").append("svg")
        .attr("width", "100%")
        .attr("height", height)
    
    var force = d3.layout.force()
        .nodes(nodes)
        .links([])
        .charge(-400)
    
        .gravity(0.1)
        .friction(0.9)
        .size([width, height])
        .on("tick", tick);
    
    var node = svg.selectAll("g");
    
    var counter = 0;
    
    function tick(e) {
      var k = .1 * e.alpha;
    
      // Push nodes toward their designated focus.
      nodes.forEach(function(o, i) {
        o.y += (foci[o.id].y - o.y) * k;
        o.x += (foci[o.id].x - o.x) * k;
      });
    
      node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    
    }
    
    
    var timer = setInterval(function(){
    
      if (nodes.length > data.length-1) { clearInterval(timer); return;}
    
      var item = data[counter];
      nodes.push({id: item.id, r: item.r, name: item.name});
      force.start();
    
      node = node.data(nodes);
    
      var n = node.enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
          .style('cursor', 'pointer')
          .on('mousedown', function() {
             var sel = d3.select(this);
             sel.moveToFront();
          })
          .call(force.drag);
    
      n.append("circle")
          .attr("r",  function(d) { return d.r; })
          .style("fill", function(d) { return fill(d.id); })
    
      n.append("text")
          .text(function(d){
              return d.name
              return d.value;
          })
          .style("font-size", function(d) {
              return Math.min(1 * d.r, (1 * d.r - 8) / this.getComputedTextLength() * 16) + "px"; 
           })
          .attr("dy", ".2em")
    
      counter++;
    }, 100);
    
    
    d3.selection.prototype.moveToFront = function() {
      return this.each(function(){
        this.parentNode.appendChild(this);
      });
    };
    
    function resize() {
      width = window.innerWidth;
      force.size([width, height]);
      force.start();
    }
    
    d3.select(window).on('resize', resize)