javascript - 如何使用ip地址绘制来源国和目的国之间的交互？

Question

我正在尝试创建一个可点击的世界地图，每个国家都有一个标记。单击来源国家/地区的标记时，应以聚合方式显示与其他国家/地区的互动。我能够绘制世界地图，但我不确定如何使用 CSV 文件中提供的 ip 地址绘制两个国家之间的交互。我试图寻找解决方案但徒劳无功。我是 d3.js 的新手。如果有人能对此有所启发，那就太好了。

一个建议会很有帮助。关于如何继续使用任何相关库(如果需要)或任何其他建议的建议将与任何直接答案一样有用。谢谢。 这是 plnkr

这是脚本

var app = angular.module("chartApp", []);
app.controller("SalesController", function($scope, $http) {
$http.get("countries.csv").then(function(response) {
    $scope.salesData = response;
    });
});

app.directive("linearChart", function($window) {
return {
    restrict: "EA",
    // template: "<svg width='1024' height='728'></svg>",
    link: function(scope, elem, attrs) {
        // canvas resolution
        var margin = { top: 50, left: 50, right: 50, bottom: 50 },
            height = 900 - margin.top - margin.bottom,
            width = 1400 - margin.left - margin.right;

        // defines "svg" as data type and "make canvas" command
        var svg = d3.select("#map")
            .append("svg")
            .attr("height", height + margin.top + margin.bottom)
            .attr("width", width + margin.left + margin.right)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // var width = 1500,
        //     height = 900;

        d3.queue()
            .defer(d3.json, "https://unpkg.com/world-atlas@1.1.4/world/110m.json")
            .defer(d3.csv, "countries.csv")
            .await(ready);

        // projection-settings for mercator    
        var projection = d3.geoMercator()
            // .translate([width / 2, height / 2])
            // where to center the map in degrees
            .center([-30, 60])
            // // zoomlevel
            .scale(200);
        // // map-rotation
        // .rotate([0, 0]);

        /* Create a Path using projection */

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


        function ready(error, data, country_name) {
            console.log(data);


            var countries = topojson.feature(data, data.objects.countries).features;
            console.log(countries);
            console.log(country_name);

            /* Add a path for each country
                 Shapes -> Path
            */

            svg.selectAll(".country")
                .data(countries)
                .enter().append("path")
                .attr("class", "country")
                .attr("d", path)
                .on('mouseover', function(d) {
                    d3.select(this).classed("selected", true);
                })
                .on('mouseout', function(d) {
                    d3.select(this).classed("selected", false);
                });

            svg.selectAll(".country-circles")
                .data(country_name)
                .enter().append("circle")
                .attr("class", "circle")
                .attr("r", 2)
                .attr("cx", function(d) {
                    var coords = projection([d.longitude, d.latitude]);
                    return coords[0];
                })
                .attr("cy", function(d) {
                    var coords = projection([d.longitude, d.latitude]);
                    return coords[1];
                });

            svg.selectAll(".countries")
                .data(country_name)
                .enter().append("marker")
                .attr("class", "countries")
                .attr("x", function(d) {
                    var coords = projection([d.longitude, d.latitude]);
                    return coords[0];
                })
                .attr("y", function(d) {
                    var coords = projection([d.longitude, d.latitude]);
                    return coords[1];
                })

                // .text(function(d) {
                //     return d.country_name;
                // })
                .attr("dx", 5)
                .attr("dy", 2);
           }
         }
      };
  });

Answer 1

为您指明正确的方向:

您有一个包含 IP 地址的 CSV 文件，但在我看来，您需要国家/地区的经度和纬度。

您可以尝试批量转换这些 here或者你可以使用像 this 这样的 api为了获得正确的经度和纬度以及相应的 IP 地址。

为了展示那些点之间的相互作用，我认为这个例子here对您上路最有帮助。