Question

使用此git，我有https://codepen.io/anon/pen/xNWzpq

我想根据区域在我的数组中出现的顺序为区域着色。当前正在根据源数据中出现的次数为区域着色：

var areas=["AB", "AL", "B", "BA", "BB", "BD", "BH", "BL", "BN", "BR", "BS", "BT", "CA", "CB", "CF", "CH", "CM", "CO", "CR", "CT", "CV", "CW", "DA", "DD", "DE", "DG", "DH", "DL", "DN", "DT", "DY", "E", "EC", "EH", "EN", "EX", "FK", "FY", "G", "GL", "GU", "HA", "HD", "HG", "HP", "HR", "HS", "HU", "HX", "IG", "IP", "IV", "KA", "KT", "KW", "KY", "L", "LA", "LD", "LE", "LL", "LN", "LS", "LU", "M", "ME", "MK", "ML", "N", "NE", "NG", "NN", "NP", "NR", "NW", "OL", "OX", "PA", "PE", "PH", "PL", "PO", "PR", "RG", "RH", "RM", "S", "SA", "SE", "SG", "SK", "SL", "SM", "SN", "SO", "SP", "SR", "SS", "ST", "SW", "SY", "TA", "TD", "TF", "TN", "TQ", "TR", "TS", "TW", "UB", "W", "WA", "WC", "WD", "WF", "WN", "WR", "WS", "WV", "YO", "ZE"];

var areadata={};

_.each(areas, function(a) {
  areadata[a]=a.charCodeAt(0);
});

例如，我想做的是

var areas=["AB", "AL", "B", "BA"];

其中AB是最暗的颜色，BA是最浅的颜色，所有未列出的颜色都是默认颜色。

我尝试过

_.each(areas, function(a) {
  areadata[areas]=areas.charCodeAt(0);
});

和

  color.domain(d3.extent(_.toArray(areas)));

但是我不确定如何将数组顺序与颜色匹配

Answer 1

如果我正确理解了您的问题，那么您所需要做的就是每个元素的索引：

areas.forEach(function(a, i) {
    areadata[a]=i;
});

此外，由于颜色阵列从最高颜色变为最暗颜色，因此您必须反转范围或域：

color.domain(d3.extent(_.toArray(areadata)).reverse());

以下是分叉的CodePen：https://codepen.io/anon/pen/byvjRE

按区域在数组中出现的顺序为它们上色

1 个答案: