Question

我已经将“使用d3，topojson和csv创建世界地图”教程改编成可用的v5版本：https://www.youtube.com/watch?v=aNbgrqRuoiE&t=216s

然而，问题在于我要引入一个单独的数据源，即CSV文件。当我把它带入并检查数据时，我得到一个对象数组，这很好。但是为了使用long和lat坐标值将CSV中的位置转换为地图上的点，我显然需要访问CSV中的这些列值。在本教程中，作者使用以下内容轻松完成：

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

但考虑到他正在使用的D3版本，他编写代码的方式就是这么简单。我不知道如何使用v5语法自适应。

因此，为了完成他所做的事情，我需要找到一种方法来访问对象内的纬度和经度属性。现在我对D3很新，但我设法通过以下计算实现了这个目标（但是我对一种更好的方法持开放态度，因为我不确定这在技术上是最好的方式，还是它可以与上面所做的一起工作）：

var long = d3.entries({longitude: true});
var lat = d3.entries({latitude: true});

问题是此代码仅在我在单独的.js文件中测试时才有效，其中CSV是唯一的数据源。当我尝试在包含.json数据源的.js文件中运行代码时，它不起作用。它继续返回原始对象数组及其所有属性。

这是我到目前为止使用的所有代码：

var margin = {top: 50, left: 50, right: 50, bottom: 50},
        height = 400 - margin.top - margin.bottom,
        width = 1600 - margin.left - margin.right;

var svg = d3.selectAll("body")
        .append("svg")
        .attr("height", height + margin.top + margin.bottom)
        .attr("width", width + margin.left + margin.right)
        .append("g");

d3.json("https://d3js.org/world-50m.v1.json").then(function (data)
    {console.log(data);

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

// console.log(countries);

var projection = d3.geoMercator()
    .translate([width/2, height/2])
    .scale(100);

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

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

    d3.csv("TData.csv", function(d) {
              return {
                city: d.City,
                continent: d.Continent,
                country: d.Country,
                dimension: d.Dimension,
                identity: d.Identity,
                score: +d.Score,
                state: d.Subdivision,
                trait: d.Trait,
                index: d.Index,
                longitude: d.Latitude,
                latitude: d.Longitude
              }
            }).then(function(data) {
                // console.log(data);

                    var long = d3.entries({longitude: true});
                    var lat = d3.entries({latitude: true});

    console.log(long);
    console.log(lat);

            });

CSV文件的示例是：

City,Continent,Country,Dimension,Identity,Score,Subdivision,Trait,Index,Latitude,Longitude
Wilmington,North America,United States,Pride,1270858,45,Delaware,Ego,1,"39,7932","-75,6181"
Wilmington,North America,United States,Humility,1270858,23,Delaware,Selflessness,2,"39,7932","-75,6181"
Wilmington,North America,United States,Humility,1270858,23,Delaware,Generosity,3,"39,7932","-75,6181"
Wilmington,North America,United States,Anger,1270858,48,Delaware,Impatience,4,"39,7932","-75,6181"

Answer 1

使用给定的csv文件，您必须将字符串坐标解析为float变量 - 为此您还需要替换那里的逗号 - 以下代码可以使用

var margin = {top: 50, left: 50, right: 50, bottom: 50},
	height = 400 - margin.top - margin.bottom,
	width = 1600 - margin.left - margin.right;

var svg = d3.selectAll("body")
	.append("svg")
	.attr("height", height + margin.top + margin.bottom)
	.attr("width", width + margin.left + margin.right)
	.append("g");

var gBackground = svg.append("g"); // appended first
var gDataPoints = svg.append("g"); // appended second
			
d3.json("https://d3js.org/world-50m.v1.json").then(function (data) {
	console.log(data);

	var countries = topojson.feature(data,data.objects.countries).features;
	var long = d3.entries({longitude: true});
	var lat = d3.entries({latitude: true});

	console.log(long);
	console.log(lat);

	gBackground.selectAll(".country")
		.data(countries)
		.enter().append("path")
		.attr("class", "country")
		.attr("d", path)
		.on("mouseover", function(d)
			{d3.select(this).classed("hover", true)})
		.on("mouseout", function(d)
			{d3.select(this).classed("hover", false)});
});	

var projection = d3.geoMercator();
// .translate([width/2, height/2])
// .scale(100);
// need fixing - not sure why they're not working

var path = d3.geoPath()
	.projection(projection);

		
d3.csv("TruityData.csv", function(d) {
	return {
		city: d.City,
		continent: d.Continent,
		country: d.Country,
		dimension: d.Dimension,
		identity: d.Identity,
		score: +d.Score,
		state: d.Subdivision,
		trait: d.Trait,
		index: d.Index,
		latitude: d.Latitude,
		longitude: d.Longitude
	}
}).then(function(data) {
	// console.log(data[0]);
	
	gDataPoints.selectAll("state-circle")
		.data(data)
		.enter().append("circle")
		.attr("class", "state-circle")
		.attr("r",3)
		.attr("cx", function(d) {
			var dln = parseFloat(d.longitude.replace(",", "."));
			var dlt = parseFloat(d.latitude.replace(",", "."));
			var coords = projection([dln, dlt]);
			return coords[0];})
		.attr("cy", function(d) {
			var dln = parseFloat(d.longitude.replace(",", "."));
			var dlt = parseFloat(d.latitude.replace(",", "."));
			var coords = projection([dln, dlt]);
			return coords[1];});
		
});

使用多个数据源时D3功能不起作用

1 个答案: