d3地图上的线未形成曲线 [英] line on d3 map not forming a curve
问题描述
我已经使用d3.js创建了地图.我想在两个位置之间显示一条曲线.我能够显示一条线，但是有时它不能形成一条完美的曲线.对于某些直线，这些直线会在地图后面(穿过反子午线)弯曲到目的地.
I have created a map using d3.js. I want to show a curved line between two locations. I am able to show a line, but sometimes it does not form a perfect curve. For some lines, the lines curve behind the map (across the anti-meridian) to their destination.
这是一支演示问题的代码笔: https://codepen.io/peeyush-pant/pen/WqbPax
Here's a code pen demonstrating the problem: https://codepen.io/peeyush-pant/pen/WqbPax
还有一张图片:
这是我的投影数据:
var projection = d3.geoEquirectangular();
var path = d3.geoPath()
.projection(projection);
这是我画线的方式:
arcGroup.selectAll("myPath")
.data(links)
.enter()
.append("path")
.attr("class", "line")
.attr("id", function (d, i) {
return "line" + i;
})
.attr("d", function (d) {
return path(d)
})
.style("fill", "none")
.style("stroke", '#fff787')
.style("stroke-width", 1.5);
谢谢.
推荐答案
D3 geoPath可用于创建遵循更大圆距的路径:它们不弯曲样式，而是根据需要弯曲，具体取决于投影.代表地球上连接两个点的最短路径. D3 geoPaths会动态重新采样以允许这样做.
D3 geoPath can be used to create paths that follow greater circle distance: they aren't curved for style, they are curved as needed, depending on projection, to represent the shortest path on earth to connect two points. D3 geoPaths are dynamically re sampled to allow this.
此行为在Web地理映射库中是异常的，大多数将纬度和经度视为笛卡尔数据而不是三维数据:其中，纬度和经度是球体上的点.在将数据视为笛卡尔时，连接两个点时直线是直的.在d3中，可以使用诸如这些之类的方法来实现.
This behavior is unusual in web geographic mapping libraries, most of which treat latitude and longitude as Cartesian data rather than three dimensional data: where latitude and longitude are points on a sphere. In treating data as Cartesian, lines are straight when connecting two points. In d3 this can be accomplished with methods such as these.
如果您希望所有线段的曲线都一致，我们将把数据视为笛卡尔，然后对曲线进行插值.由于我们将不会使用d3.geoPath，因此无需将目标和源转换为geojson LineStrings，我们可以直接使用这些点.
If you want a consistent curve for all line segments, we will treat the data as Cartesian and interpolate a curve. As we won't be using d3.geoPath for this, there is no need to convert your destinations and sources into geojson LineStrings, we can just use the points directly.
我们可以为此使用曲线插值器，但是默认的插值器在不添加终点和起点之间的控制点的情况下将无法工作.相反，让我们尝试自定义曲线-查看以下答案( a ，
We can use a curve interpolator for this, but the default interpolators won't work without adding control points between the end and start destinations. Instead, let's try a custom curve - see these answers (a,b) for more on custom curves.
我们的自定义曲线可以在第一个之后的任何点上找到它和它之前的点之间的中点，并偏移一个点以创建一个控制点，该控制点在先前点和当前点之间形成一个三角形，然后绘制它们之间的二次曲线:
Our custom curve could take any point after the first to find the mid point between it and the point before it and offset a point to create a control point forming a triangle between the prior point and the current point, then we just draw a quadratic curve between them:
var curve = function(context) {
var custom = d3.curveLinear(context);
custom._context = context;
custom.point = function(x,y) {
x = +x, y = +y;
switch (this._point) {
case 0: this._point = 1;
this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
this.x0 = x; this.y0 = y;
break;
case 1: this._point = 2;
default:
var x1 = this.x0 * 0.5 + x * 0.5;
var y1 = this.y0 * 0.5 + y * 0.5;
var m = 1/(y1 - y)/(x1 - x);
var r = -100; // offset of mid point.
var k = r / Math.sqrt(1 + (m*m) );
if (m == Infinity) {
y1 += r;
}
else {
y1 += k;
x1 += m*k;
}
this._context.quadraticCurveTo(x1,y1,x,y);
this.x0 = x; this.y0 = y;
break;
}
}
return custom;
}
有了这个，我们可以简单地画出像这样的线条:
With this in hand we can simply draw lines with something like:
d3.line()
.curve(curve)
.x(function(d) { return d.lon; })
.y(function(d) { return d.lat; })
如下所示:
let data = [{
"source": {
"lat": 40.712776,
"lon": -74.005974
},
"destination": {
"lat": 21.05,
"lon": 105.55
}
},
{
"source": {
"lat": 40.712776,
"lon": -74.005974
},
"destination": {
"lat": -35.15,
"lon": 149.08
}
}]
var curve = function(context) {
var custom = d3.curveLinear(context);
custom._context = context;
custom.point = function(x,y) {
x = +x, y = +y;
switch (this._point) {
case 0: this._point = 1;
this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
this.x0 = x; this.y0 = y;
break;
case 1: this._point = 2;
default:
var x1 = this.x0 * 0.5 + x * 0.5;
var y1 = this.y0 * 0.5 + y * 0.5;
var m = 1/(y1 - y)/(x1 - x);
var r = -100; // offset of mid point.
var k = r / Math.sqrt(1 + (m*m) );
if (m == Infinity) {
y1 += r;
}
else {
y1 += k;
x1 += m*k;
}
this._context.quadraticCurveTo(x1,y1,x,y);
this.x0 = x; this.y0 = y;
break;
}
}
return custom;
}
var projection = d3.geoEquirectangular().translate([250,150]).scale(500/Math.PI/2);
var path = d3.geoPath(projection);
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 300);
d3.json("https://unpkg.com/world-atlas@1/world/110m.json").then(function(world) {
var worldOutline = svg.append("path")
.datum(topojson.mesh(world))
.attr("d", path );
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(curve);
svg.selectAll(null)
.data(data)
.enter()
.append("path")
.datum(function(d) {
return [d.source,d.destination]; // d3.line expects an array where each item represnts a vertex.
})
.attr("d",line)
.style("stroke","black")
.style("stroke-width",1.5);
});
path {
fill: none;
stroke: #ccc;
stroke-width: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
下面，我只是为了好玩，我比较使用d3.line的直线，比较使用d3.line和自定义曲线插值器的曲线以及比较平淡的d3.geoPath和一些动画的曲线:
Below, just for fun, I compare straight lines using d3.line, curved lines using d3.line with a custom curve interpolator, and plain old d3.geoPath with some animation:
let data = [{
"source": {
"lat": 40.712776,
"lon": -74.005974
},
"destination": {
"lat": 21.05,
"lon": 105.55
}
},
{
"source": {
"lat": 40.712776,
"lon": -74.005974
},
"destination": {
"lat": -35.15,
"lon": 149.08
}
}]
var curve = function(context) {
var custom = d3.curveLinear(context);
custom._context = context;
custom.point = function(x,y) {
x = +x, y = +y;
switch (this._point) {
case 0: this._point = 1;
this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
this.x0 = x; this.y0 = y;
break;
case 1: this._point = 2;
default:
var x1 = this.x0 * 0.5 + x * 0.5;
var y1 = this.y0 * 0.5 + y * 0.5;
var m = 1/(y1 - y)/(x1 - x);
var r = -100; // offset of mid point.
var k = r / Math.sqrt(1 + (m*m) );
if (m == Infinity) {
y1 += r;
}
else {
y1 += k;
x1 += m*k;
}
this._context.quadraticCurveTo(x1,y1,x,y);
this.x0 = x; this.y0 = y;
break;
}
}
return custom;
}
var projection = d3.geoEquirectangular().translate([250,150]).scale(500/Math.PI/2);
var path = d3.geoPath(projection);
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 300);
d3.json("https://unpkg.com/world-atlas@1/world/110m.json").then(function(world) {
var worldOutline = svg.append("path")
.datum(topojson.mesh(world))
.attr("d", path );
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(curve);
var fauxArcPaths = svg.selectAll(null)
.data(data)
.enter()
.append("path")
.datum(function(d) {
return [d.source,d.destination];
})
.attr("d",line)
.style("stroke","black")
.style("stroke-width",1.5);
var greatCirclePaths = svg.selectAll(null)
.data(data)
.enter()
.append("path")
.datum(function(d) {
return {type:"LineString",coordinates:
[[d.source.lon,d.source.lat],[d.destination.lon,d.destination.lat]] }
})
.attr("d",path)
.style("stroke","steelblue")
.style("stroke-width",1.5);
var straightline = d3.line()
.x(function(d) {
return projection([d.lon,d.lat])[0];
})
.y(function(d) {
return projection([d.lon,d.lat])[1];
});
var straightPaths = svg.selectAll(null)
.data(data)
.enter()
.append("path")
.datum(function(d) {
return [d.source,d.destination];
})
.attr("d",straightline)
.style("stroke-width",1.5)
.style("stroke","orange");
// animate:
d3.interval(function(elapsed) {
projection.rotate([ -elapsed / 150, elapsed/300 ]);
straightPaths.attr("d",straightline);
greatCirclePaths.attr("d",path);
fauxArcPaths.attr("d",line);
worldOutline.attr("d",path);
}, 50);
});
path {
fill: none;
stroke: #aaa;
stroke-width: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
这篇关于d3地图上的线未形成曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
