Question

我有一张D3世界地图，上面有我感兴趣的纬度和经度点上的标记。

现在我想绘制连接这些点的简单静态线条。我该怎么做？

这是我带有标记的地图代码：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

    var width = 900,
            height = 500;

    // Create Projection
    var projection = d3.geo.mercator()

    // Generate paths based on projection
    var path = d3.geo.path()
            .projection(projection);

    // Create SVG
    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

    // Group for the map features
    var features = svg.append("g")
            .attr("class","features");

    // Build map with markers
    d3.json("countries.topojson",function(error,geodata) {
        if (error) return console.log(error);

        //Create a path for each map feature in the data
        features.selectAll("path")
                .data(topojson.feature(geodata, geodata.objects.subunits).features)
                .enter()
                .append("path")
                .attr("d", path)
        // Add markers for cities by their latitude and longitude.
        d3.csv("cities.csv", function (error, data) {
            features.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", "red");

        });
    });
</script>

cities.csv：

name,lat,lon
LA,34.05,-118.25
NY,40.7127,-74.006

此代码产生如下内容：

Map with points 现在我想用线条连接标记。只是一个静态线，不需要动画或任何东西。结果应如下所示：

Map with points and line connecting points

我为d3.json()电话上方的行添加了一个新组：

var lines = features.append("g");

然后在d3.json()调用中，我添加这样的内容来创建行坐标数组：

   var theLines = [
                {
                    type: "LineString",
                    coordinates: [
                        [ data[0].lon, data[0].lat ],
                        [ data[1].lon, data[1].lat ]
                    ]
                }
            ];

但我不确定接下来要做什么（或者我的方法是否正确）实际添加连接标记的行。

我想使用CSS来设置标记和线条的颜色和大小。

更新

我尝试更改圆圈的代码来绘制一条线但是它不起作用：

根据srbdev's回答，我将lineString更改为line：

d3.csv("cities.csv", function (error, data) {
    features.selectAll("line")
            .data(data)
            .enter()
            .append("line")
            .attr("x1", function (d) {
                return projection([d.lon])[0];
            })
            .attr("y1", function (d) {
                return projection([d.lat])[0];
            })
            .attr("x2", function (d) {
                return projection([d.lon])[1];
            })
            .attr("y2", function (d) {
                return projection([d.lat])[1];
            })
            .style("stroke", "red");
});

但是我得到以下结果：x2和y2在控制台中有"NaN"个值。 enter image description here

Answer 1

在编辑时，您应该将代码更改为：

d3.csv("cities.csv", function (error, data) {
features.selectAll("line")
        .data(data)
        .enter()
        .append("line")
        .attr("x1", function (d) {
            return projection([d.lon])[0];
        })
        .attr("y1", function (d) {
            return projection([d.lat])[0];
        })
        .attr("x2", function (d) {
            return projection([d.lon])[1];
        })
        .attr("y2", function (d) {
            return projection([d.lat])[1];
        })
        .style("stroke", "yellow"); 
});

我将“lineString”更改为“line”。有关可用SVG元素的列表，请参阅此link。

另一个解决方案，虽然不像Lars所提到的那样，不是为每个圈分配一个ID，而是按照以下方式创建你的行：

svg.append("line")
    .attr("x1", d3.select("#circle1").attr("cx"))
    .attr("y1", d3.select("#circle1").attr("cy"))
    .attr("x2", d3.select("#circle2").attr("cx"))
    .attr("y2", d3.select("#circle2").attr("cy"))
    .style("stroke", "yellow");

希望这有帮助！

在纬度和经度点之间的D3地图上添加静态线

1 个答案: