Javascript D3.js，全球叶绿素/热量图。使图例水平，并在国家周围添加黑色边框_Javascript_Dictionary_D3.js_Geolocation

Javascript D3.js，全球叶绿素/热量图。使图例水平，并在国家周围添加黑色边框

javascript dictionary d3.js geolocation

Javascript D3.js，全球叶绿素/热量图。使图例水平，并在国家周围添加黑色边框,javascript,dictionary,d3.js,geolocation,Javascript,Dictionary,D3.js,Geolocation,我第一次使用d3.js，并成功地创建了一个基本的叶绿素图本质上，我还想做3件事，但对d3或Javascript还不够熟悉：使图例水平并移动到非洲海岸以下为所有国家/地区添加薄黑色边框也许会自动长出antartica？如果不可能，这可以在后处理中完成我不确定这些任务是不可能的还是容易的，因为我没有在d3.js上做太多工作，也没有取得太大进展 <!DOCTYPE html> <meta charset="utf-8"> <style

我第一次使用d3.js，并成功地创建了一个基本的叶绿素图

本质上，我还想做3件事，但对d3或Javascript还不够熟悉：

使图例水平并移动到非洲海岸以下

为所有国家/地区添加薄黑色边框

也许会自动长出antartica？如果不可能，这可以在后处理中完成

我不确定这些任务是不可能的还是容易的，因为我没有在d3.js上做太多工作，也没有取得太大进展

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  @import url(//fonts.googleapis.com/css?family=Times+New+Roman);




  .countries {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
  }
  .legendThreshold {
      font-size: 12px;
      font-family: sans-serif;
  }
  .caption {
      fill: #000;
      text-anchor: start;
      font-size: 14px;
  }
  /*      font-weight: bold;*/

  .anchorNode {
       font-family: "Times New Roman";
      font-size: 2px;
  }
  .legendLinear text.label {
     fill: '#fff'
       font-family: "Times New Roman";
      font-size: 2px;
}

  .legendThreshold text.label {
     fill: '#fff'
       font-family: "Times New Roman";
     font-size: 12px;

}
* {
 font-family: "Times New Roman", Times, serif;

}



/* font-size: 100%;*/

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>
<script>
// The svg
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
var path = d3.geoPath();
var projection = d3.geoMercator()
    .scale(width / 2 / Math.PI)
    .translate([width / 2, height / 2])
var path = d3.geoPath()
    .projection(projection);

// Data and color scale
var data = d3.map();
var colorScheme = d3.schemeReds[6];
colorScheme.unshift("#eee")
var colorScale = d3.scaleThreshold()
    .domain([1, 3, 5, 10, 20, 100])
    .range(colorScheme);

// Legend
var g = svg.append("g")
    
    .attr("class", "legendThreshold")
    .attr("transform", "translate(190,300)");

g.append("text")
    .attr("class", "caption")
    .attr("x", 0)
    .attr("y", -6)
    .style("font-size","12px")

    .text("Subscribers");
var labels = ['0', '1-3', '3-5', '5-10', '10-20', '20-100', '> 100'];
var legend = d3.legendColor()
    .labels(function (d) { return labels[d.i]; })
    .shapePadding(0)
    .scale(colorScale);
svg.select(".legendThreshold")
    .call(legend);

// Load external data and boot
d3.queue()
    .defer(d3.json, "http://enjalot.github.io/wwsd/data/world/world-110m.geojson")
    .defer(d3.csv, "https://gist.githubusercontent.com/palewire/d2906de347a160f38bc0b7ca57721328/raw/3429696a8d51ae43867633ffe438128f8c396998/mooc-countries.csv", function(d) { data.set(d.code, +d.total); })
    .await(ready);

function ready(error, topo) {
    if (error) throw error;

    // Draw the map
    svg.append("g")
        .attr("class", "countries")
        .selectAll("path")
        .data(topo.features)
        .enter().append("path")
            .attr("fill", function (d){
                // Pull data for this country
                d.total = data.get(d.id) || 0;
                // Set the color
                return colorScale(d.total);
            })
            .attr("d", path);
}
</script>


@导入url（//font.googleapis.com/css？family=Times+New+Roman）；
.国家{
填充：无；
冲程：#fff；
笔划线条连接：圆形；
}
legendThreshold博士{
字体大小：12px；
字体系列：无衬线；
}
.标题{
填写：#000；
文本锚定：开始；
字体大小：14px；
}
/*字体大小：粗体*/
凤尾鱼{
字体系列：“新罗马时代”；
字号：2px；
}
.legendLinear text.label{
填充：“#fff”
字体系列：“新罗马时代”；
字号：2px；
}
.legendThreshold text.label{
填充：“#fff”
字体系列：“新罗马时代”；
字体大小：12px；
}
* {
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
}
/*字体大小：100%*/
//svg
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
//地图与投影
var path=d3.geoPath（）；
var projection=d3.geoMercator（）
.比例（宽度/2/数学PI）
.translate（[宽度/2，高度/2]）
var path=d3.geoPath（）
.投影（投影）；
//数据和色标
var data=d3.map（）；
var colorScheme=d3.schemeReds[6]；
颜色方案。取消移位（“eee”）
var colorScale=d3.scaleThreshold（）
.domain（[1,3,5,10,20,100]）
.范围（配色方案）；
//传奇
var g=svg.append（“g”）
.attr（“类”、“legendThreshold”）
.attr（“转换”、“翻译（190300）”）；
g、 附加（“文本”）
.attr（“类”、“标题”）
.attr（“x”，0）
.attr（“y”，-6）
.style（“字体大小”，“12px”）
.文本（“认购人”）；
变量标签=['0'，'1-3'，'3-5'，'5-10'，'10-20'，'20-100'，'>100']；
var legend=d3.legendColor（）
.labels（函数（d）{返回标签[d.i]；}）
.形状添加（0）
.色标（色标）；
svg.select（“.legendThreshold”）
.通话（图例）；
//加载外部数据并启动
d3.队列（）
.defer（d3.json，“http://enjalot.github.io/wwsd/data/world/world-110m.geojson")
.延迟（d3.csv，“https://gist.githubusercontent.com/palewire/d2906de347a160f38bc0b7ca57721328/raw/3429696a8d51ae43867633ffe438128f8c396998/mooc-countries.csv，函数（d）{data.set（d.code，+d.total）；}）
.等待（准备好）；
功能就绪（错误，拓扑）{
如果（错误）抛出错误；
//画地图
svg.append（“g”）
.attr（“类别”、“国家”）
.selectAll（“路径”）
.数据（地形特征）
.enter（）.append（“路径”）
.attr（“填充”，功能（d）{
//获取这个国家的数据
d、 总计=数据。获取（d.id）| 0；
//设置颜色
返回色标（d.总计）；
})
.attr（“d”，路径）；
}

前两个是微不足道的。 1只是更改图例的平移位置的问题让它水平只是通过查看d3图例文档（）：

2将css中的国家/地区的笔划颜色更改为黑色（#000）

  .countries {
    fill: none;
    stroke: #000;
    stroke-linejoin: round;
  }

3更为复杂，但在数据中（在对返回的对象进行了一点

控制台记录之后），我们知道南极洲的键是“ATA”，因此我们可以从返回的topo.features数据中过滤出来
function ready(error, topo) {
    if (error) throw error;

  topo.features = topo.features.filter (function(d) { return d.id !== "ATA"; });

看
也许你应该问3个独立的问题？注意，在第一部分，提问者还问了关于制作传奇horizontaloh的问题。是的，他补充说，现在，谢谢，这是当之无愧的赏金
function ready(error, topo) {
    if (error) throw error;

  topo.features = topo.features.filter (function(d) { return d.id !== "ATA"; });