我正在尝试复制我在教程中看到的地图 即使我的编辑器上的代码与他的代码相同，我似乎也无法正确处理。当我尝试调试代码时，我会收到以下错误
无法读取d3.scale.log中未定义的属性日志。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3!!</title>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
<script>
var outerWidth=500;
var outerheight=250;
var margin={left:-50, top:0, right:-50, bottom:0};
var xColumn="longitude";
var yColumn="latitude";
var rColumn="population";
var peoplePerPixel=1000000;
var innerWidth=outerWidth - margin.left - margin.right;
var innerHeight=outerheight - margin.top - margin.bottom;
var svg=d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerheight);
var g= svg.append("g")
.attr("transform", "translate (" + margin.left + "," +margin.top +")");
var xScale= d3.scale.log()
.range([0,innerWidth]);
var yScale= d3.scale.log()
.range([innerHeight,0]);
var rScale= d3.scale.sqrt();
function render (data){
xScale.domain(d3.extent(data, function (d){return d[xColumn]; }));
yScale.domain(d3.extent(data, function (d){return d[yColumn]; }));
rScale.domain([0, d3.max(data, function (d){return d[xColumn]; })]);
var circles= svg.selectAll("circle").data(data);
circles.enter().append("circle");
circles
.attr("cx", function(d){ return xScale(d[xColumn]);})
.attr("cy", function(d){ return yScale(d[yColumn]);})
.attr("r", function(d){ return rScale(d[rColumn]);});
circles.exit().remove();
}
function type(d) {
d.latitude=+d.latitude;
d.longitude=+d.longitude;
d.population=+d.population;
return d;
}
d3.csv("map_cities.csv",type, render)
</script>
</body>
</html>
教程使用D3 v3.5.5，而您使用的是D3 V4。由于新版本使用ES6模块，因此必须将上一个版本的名称空间扁平化。ChangElog具有您案件的详细信息：
秤(D3级(
根据伟大的命名空间的扁平化：
[…]
- d3.scale.sqrt↦d3.scalesqrt
- d3.scale.log↦d3.scalelog
尽管您的问题中未明确提及，但我还包括了d3.scale.sqrt的调整，这将是您要遇到的下一个问题。