0

我正在尝试使用d3.js和三个数据文件制作地图：

  • 带有我的底图的简单.topojson文件
  • 具有多边形区域的.geojson文件
  • 带有数据的.csv文件（与.geojson有一个共同的字段）

首先，我使用以下代码创建了我的基本地图：

var width = 360,
height = 600,
width2 = 479;

var proj = d3.geo.mercator()
    .center([7.76, 48.57])
    .scale(130000)
    .translate([width / 2, height / 2]);

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

var svg = d3.select("#carte").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("strasbourg.json", function(error, base) {

   svg.append("path")
    .data(topojson.feature(base, base.objects.contour).features)
      .attr("class", "fond-stras")
      .attr("d", path);

结果很好（http://raphi.m0le.net/data/BAS/App_d3_strasrk/etape%201.html），所以我让我的代码更复杂：

var width = 360,
    height = 600,
    width2 = 479;

var proj = d3.geo.mercator()
  .center([7.76, 48.57])
    .scale(130000)
    .translate([width / 2, height / 2]);

// This array will be used to the next choropleth

var couleurs = ['rgb(165,15,21)','rgb(222,45,38)','rgb(251,106,74)',
    'rgb(252,146,114)','rgb(252,187,161)','rgb(254,229,217)'];

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

var svg = d3.select("#carte").append("svg")
    .attr("width", width)
    .attr("height", height);

// I use queue.v1.min.js to load my .topojson, .geojson and .csv

queue()
    .defer(d3.json,"strasbourg.json")
    .defer(d3.json, "chute_ries.json")
    .defer(d3.csv, "progression_riesk.csv")
    .await(ready);

function ready(error,base,areas,results) {

// I declare my base map like before, it works always fine

  svg.append("path")
    .data(topojson.feature(base, base.objects.contour).features)
      .attr("class", "fond-stras")
      .attr("d", path);

// the problematic part begins here :

  svg.append("g").attr("class","areas")
        .selectAll("path")
        .data(areas.features)
        .enter()
          .append("path")
          .attr("class", "area")
          .attr("d", path)
// I write this to test an automatic colouring
          .attr("fill", function(d,i){
              if (results[i].diff_ries<-23){
            return couleurs[0]
          }
          else {return couleurs[4]

          }
        })

不幸的是，它不起作用，正如您将在此处看到的那样：http ://raphi.m0le.net/data/BAS/App_d3_strasrk/etape%202.html

尽管我付出了很多努力，但我还是无法让它发挥作用。我的.geojson是用 QGis 创建的，所以我猜它尊重右手规则。

我的控制台没有显示任何错误，所以我无法确定出了什么问题。我怀疑它可能是data()声明，但我见过几个例子，它是这样用.geojson数据编写的并且运行良好。

4

1 回答 1

0

这有点棘手，但问题来自我原始文件的投影：Lambert-93（法国参考）而不是脚本中精确的墨卡托！

我用墨卡托投影重新保存了文件，一切都很好！

于 2016-11-09T05:54:45.973 回答