Question

我正在尝试绘制单个数据点以及在这些点之间运行的线路径，就像我以前曾帮助过的示例D3 stop and restart transition along path to allow click through to geo data coordinates一样。

现在我想使用我的实际数据而不是一组测试坐标，但遇到了麻烦。我已经尝试了geoJson文件和csv我的数据。我正在使用带有lon和lat的csv文件来获取这些点，并希望从同一组数据中获取该行，即使用一组数据作为点和行。

我无法让我的线显示在正确的位置 - 它位于右上角，但应该在点/点上。我认为这与投影有关，但我无法正确解析数据以获得所需的行字符串。我试图在这里使用示例https://bl.ocks.org/alandunning/cfb7dcd7951826b9eacd54f0647f48d3 - 但得到空对象??

我的问题是如何将csv lon lat与d3 svg线路生成器一起使用。这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="utf-8">
<title>Working version 3</title>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<style type="text/css">

circle {
  fill: steelblue;
  stroke: pink;
  stroke-width: 3px;
}


.line{
  fill: none;
  stroke: red;
  stroke-width: 6;

}

</style>
</head>
<body>

<script>

    var w = 960,
        h = 500;

    var projection = d3.geoMercator()
                         .translate([w/2, h/2])
                         .scale([w * 0.16]);

    var path = d3.geoPath()
                 .projection(projection);

    var duration = 10000;

    var svg = d3.select("body").append("svg")
        .attr("width", w)
        .attr("height", h);

/*
    var line = d3.line()
            .x(function (d) {return projection([d.lon]);})
            .y(function (d) {return projection([d.lat]);})
    .curve(d3.curveBasis);

    var line = d3.line()
    .x(function(d){return projection(d[0].lon);})
    .y(function(d){return projection(d[0].lat);})
    .curve(d3.curveBasis);

/*ok line shows up but in wrong place
    var line = d3.line()
    .x(function(d) { return (d.lon); })
    .y(function(d) { return (d.lat); })
        .curve(d3.curveBasis);
*/

var line = d3.line()
    .x(function(d) { return (d.lon); })
    .y(function(d) { return (d.lat); })
    .curve(d3.curveBasis);


//original
/*
var line = d3.line()
.x(function(d){return projection(d)[0];})
.y(function(d){return projection(d)[1];})
.curve(d3.curveBasis);
*/
//

//bring in data
d3.queue()
    .defer(d3.json, "data/oceans.json")
    .defer(d3.csv, "data/speckCities.csv")
    .await(ready);

function ready (error, oceans, data){
    if (error) throw error;

    //console.log(data[0]);
    //console.log(data[0].lon);




//map
svg.selectAll("path")
        .data(oceans.features)
        .enter()
        .append("path")
        .attr("d", path)
        .style("fill", "#A8B2C3");

var linepath = svg.append("path")
  .datum(data)
  .attr("d", line)
    .attr('class', 'line');

    svg.selectAll("circle")
         .data(data)
         .enter()
         .append("circle")
         .attr("cx", function(d) {
             return projection([d.lon, d.lat])[0];
         })
         .attr("cy", function(d) {
             return projection([d.lon, d.lat])[1];
         })
         .attr("r", 5)
         .style("fill", "yellow")
         .style("stroke", "gray")
         .style("stroke-width", 0.25)
         .style("opacity", 0.75)
         .append("title")           //Simple tooltip
         .text(function(d) {
            return d.name ;
         });

    //




    //

    /*svg.selectAll(".point")
      .data(coordinates)
        .enter()
        .append("circle")
      .attr("r", 7)
      .attr("transform", function(d) { return "translate(" + projection(d) + ")"; });


var circle = svg.append("circle")
  .attr("r", 19)
  .attr("transform", "translate(" + projection(d) + ")");

/*
var pauseValues = {
        lastT: 0,
        currentT: 0
        };

function transition() {
  circle.transition()
      .duration(duration - (duration * pauseValues.lastT))
      .attrTween("transform", translateAlong(linepath.node()))
      .on("end", function(){
        pauseValues = {
          lastT: 0,
          currentT: 0
        };
        transition()
      });
}

function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      t += pauseValues.lastT;
      var p = path.getPointAtLength(t * l);
      pauseValues.currentT = t;
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

d3.select('button').on('click',function(d,i){
  var self = d3.select(this);
  if (self.text() == "Pause"){
        self.text('Play');
        circle.transition()
      .duration(0);
        setTimeout(function(){
            pauseValues.lastT = pauseValues.currentT;
        }, 100);
  }else{
    self.text('Pause');
    transition();
  }
});
*/
}

</script>
</body>
</html>

Answer 1

你没有预测你的行：

var linepath = svg.append("path")
  .datum(data)
  .attr("d", line)
   .attr('class', 'line');

在这种情况下，geojson中的经度/纬度对将转换为直线像素坐标：

var line = d3.line()
    .x(function(d) { return (d.lon); })
    .y(function(d) { return (d.lat); })
    .curve(d3.curveBasis);

由于svg坐标从左上角的[0,0]开始，你的点似乎是大约10度左右（正经度），北纬50度左右（正纬度），你的第一个点该行显示左起10像素，顶部50像素。此外，因为svg y值随着向下移动而增加，但纬度值随着向北移动而增加（通常在地图上向上），与y点相比，y轴上的线条也会反转。

您可以将线功能设置为使用投影来设置x和y点：

var line = d3.line()
    .x(function(d) { return projection([d.lon,d.lat])[0] ; })
    .y(function(d) { return projection([d.lon,d.lat])[1]; })
    .curve(d3.curveBasis);

你需要纬度和经度来投射一个点，所以投影函数需要两个，并返回x和y，因此[0]和[1]，这就是为什么你注释掉的部分不是＆＃ 39;工作

但这是不必要的，你可以直接将geojson传递给路径（就像你对世界背景一样），也就是说你的数据在geojson中是可用的（尽管在动态上制作一个geojson并不困难））：

var linepath = svg.append("path")
  .datum(data) // in geojson form
  .attr("d", path)  // use your path 
  .attr('class', 'line');

这比线更准确 - 在笛卡尔坐标空间中，d3.line中的线之间的线段是直的或遵循预定义的曲线。 d3.geoPath遵循很大的圆距离，因此点之间的段遵循行星上最短的路径，更准确的表示，有时可能更少，更少风格。

要动态创建geojson，假设您的数据如下：[{lon:number,lat:number},{lon:number,lat:number}]您可以使用以下内容：

var points = data.map(function(d) { return [d.lon,d.lat] })
var geojson = { "type": "LineString", "coordinates": points }

来自csv数据的地图上的d3行和点

1 个答案: