Question

我正在进行d3可视化（在flask应用程序内部），并且正在努力加载地图。我有一个带有各种数据列的csv文件以及一个带有经度和纬度坐标的json文件。我知道我的文件路径是正确的，但是当我运行我的应用程序时，我在任何地方都看不到地图。任何帮助将不胜感激。

以下是我的一些脚本标签：

login = async () => {

  // You can use 'await' only in a function marked with 'async'

  // You can set the response as value to 'data' by waiting for the promise to get resolved
  let data = await axios.get('https://myaddress/authenticate');

  // now you can use a "synchronous" data, only in the 'login' function ...
  console.log('eee', data);

  return data; // don't let this trick you, it's not the data value, it's a promise

};

// Outside usage
console.log( login() ); // this is pending promise

这是我的svg元素：

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://unpkg.com/d3-geo@1"></script> 
<script src="https://unpkg.com/d3-geo-polygon@1"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script src="https://unpkg.com/topojson-client@3"></script>

<div id="chart"></div>

这是我的csv文件：

var width = 1000, height = 750;

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

var modus = "Map", counter = 0;

var map = svg.append("g");

var cities = svg.append("g"); 

var projection = d3.geo.mercator()
                .scale(500)
                .translate([-500, 475]);

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

这是我的json文件：

var data = d3.csv("../static/data/serial_killers/info_v6.csv", 
function(data) {
    data.forEach(function(d) {
        d.DateOfBirth = +d.DateOfBirth;
        d.Latitude = +d.Latitude;
        d.Longitude = +d.Longitude;
        d.NumberOfVictims = +d.NumberOfVictims;
        d.DateOfMurderRevised = +d.DateOfMurderRevised;
        d.DateAtMurder = +d.DateAtMurder;
        //d_id = +d_id;

    });
    console.log(data[0]);
});

这是我的json文件的一部分：

d3.json("../static/data/serial_killers/location.json", function(data) {
console.log("hello i am in the loading function")
    map.selectAll('.geo-path')
    .data(data)
    .enter()
    .append('path')
    .attr('class', 'geo-path')
    .attr('d', path)
    .attr("visibility", "visible")
    .style("stroke-opacity", 1)
    .style("fill-opacity", 0.5);
});


cities.selectAll(".cities")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", "city")
        .attr("id", function(d) { return "id" + d._id;})
        .style("fill-opacity", 0)
        .style("fill", "#ff0000")
        .attr("r", 0)
        .attr("cx", function(d) { return projection([d.Longitude, 
        d.Latitude])[0];})
        .attr("cy", function(d) { return projection([d.Longitude, 
        d.Latitude])[1];});

我不确定是否要混合使用“数据”变量或发生其他情况。任何帮助将不胜感激。

D3.js地图未加载

0 个答案: