我用意大利城市的topojson地图复制了一个代码（ItalyCom2016WGS84-s1.topojson），它与我的json数据一起使用。现在我想绘制另一张图表，但是有意大利省份。 我从这个链接下载了一个shapefile：http://www.istat.it/it/files/2011/04/prov2011_g.zip
然后我将其转换为带有在线转换的topojson文件。然后我修改了所有名称，但第二张图表没有出现。我不知道如何使用这些库，所以我不知道我做错了什么。
以下是代码：
<!DOCTYPE html>
<html>
<head>
<title>BIOLOGICO - OPERATORI (TOSCANA)</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="stile_operatori.css"> <!--collegamento al foglio di stile CSS principale-->
<style>
.legenda { width:60px; height:20px; color: white; }
</style>
</head>
<body>
<div>
<p id="t">Biologico - Operatori (Toscana) </p>
</div>
<div id="l"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var fileMap = "ItalyCom2016WGS84-s1.topojson";
var url = "http://localhost/progetto_tesi/a2.php";
// trattamento dei colori
// scale prese da https://github.com/d3/d3-scale-chromatic
var color = d3.interpolateRdYlGn;
// var color = d3.interpolateBlues;
var scale;
// Finestra svg
var width = 1020, height = 960;
// Scelta della proiezione
var projection = d3.geoMercator().scale(3000).translate([-100, 2800]);
// Funzione di conversione in svg: dipende dalla proiezione scelta
var geoPath = d3.geoPath().projection(projection);
// Creazione dell'elemento svg
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var legenda = d3.select('#l');
// zoom and pan
var zoom = d3.zoom()
.on('zoom', () => {
svg.attr('transform', d3.event.transform) // updated for d3 v4
});
svg.call(zoom);
var italy;
var breaks = {
"Comuni" : [0, 25, 50, 75, 100, 125, 150, 175],
};
/*MAIN*/
$(document).ready( function() {
// Definizione dei livelli
// Caricamento mappa dei comuni
d3.json(fileMap, function(error, file) {
// Disegno la mappa dell'Italia
italy = topojson.feature(file, file.objects.ItalyCom2016WGS84);
console.log(italy);
svg.selectAll(".comuni").data(italy.features)
.enter()
.append("path")
.attr("class","comuni")
.attr("d", geoPath)
.attr("id", function(d){return d.properties.PRO_COM;})
.attr("fill", "gray");
// In base ai parametri disegno le isobande
drawCoroplethMap();
}); // d3.json(fileMap, function(error, file) {
});
// $(document).ready( function() {
function drawCoroplethMap(){
// Cancellazione della legenda
legenda.selectAll(".legenda" ).remove();
// trattamento dei colori
scale = d3.scaleLinear().domain([breaks["Comuni"][0],breaks["Comuni"][7]]).range([1, 0]);
// creazione legenda
legenda.selectAll(".legenda").data(breaks["Comuni"])
.enter()
.append('div')
.attr("class","legenda")
.attr("style" ,function(d) {return "float:left;background-color:"+color(scale(parseFloat(d)));})
.text(function(d,i) {return d;});
// 1-RECUPERO I PREZZI MEDI COMUNALI
$.getJSON(url, function(data) {
svg.selectAll(".comuni").transition()
.attr("fill", function(d){
var o=data[d.properties.COMUNE.toUpperCase()];
if (o !== undefined) colore = color(scale(parseFloat(o)));
else { colore = "rgb(128,128,128)";}
return colore
});
});
}
/*var fileMap2= "prov2011_g.topojson";
var url2="http://localhost/progetto_tesi/a1.php";
var color2 = d3.interpolateRdYlGn;
var scale2;
var width2 = 1020, height2 = 960;
// Scelta della proiezione
var projection2 = d3.geoMercator().scale(3000).translate([-100, 2800]);
// Funzione di conversione in svg: dipende dalla proiezione scelta
var geoPath2 = d3.geoPath().projection(projection2);
//Creazione legenda 2
var l2= d3.select("body").append("div")
.attr("id", "l2")
// Creazione dell'elemento svg
var svg2 = d3.select("body").append("svg")
.attr("width", width2)
.attr("height", height2)
.append("g");
var legenda2 = d3.select('#l2');
// zoom and pan
var zoom = d3.zoom()
.on('zoom', () => {
svg2.attr('transform', d3.event.transform) // updated for d3 v4
});
svg2.call(zoom);
var italy2;
var breaks2 = {
"Provincie" : [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100],
};
/*MAIN*/
/*$(document).ready( function() {
// Definizione dei livelli
// Caricamento mappa dei comuni
d3.json(fileMap2, function(error, file) {
// Disegno la mappa dell'Italia
italy2 = topojson.feature(file, file.objects.prov2011_g);
console.log(italy2);
svg2.selectAll(".provincie").data(italy2.features)
.enter()
.append("path")
.attr("class","provincie")
.attr("d", geoPath2)
.attr("id", function(d){return d.properties.NOME_PRO;})
.attr("fill", "gray");
// In base ai parametri disegno le isobande
drawCoroplethMap2();
});
});
function drawCoroplethMap2(){
// Cancellazione della legenda
legenda2.selectAll(".legenda2" ).remove();
// trattamento dei colori
scale2 = d3.scaleLinear().domain([breaks2["Provincie"][0],breaks2["Provincie"][11]]).range([1, 0]);
// creazione legenda
legenda2.selectAll(".legenda2").data(breaks2["Provincie"])
.enter()
.append('div')
.attr("class","legenda2")
.attr("style" ,function(d) {return "float:left;background-color:"+color2(scale2(parseFloat(d)));})
.text(function(d,i) {return d;});
// 1-RECUPERO I PREZZI MEDI COMUNALI
$.getJSON(url2, function(data) {
svg2.selectAll(".provincie").transition()
.attr("fill", function(d){
var o=data[d.properties.NOME_PRO.toUpperCase()];
if (o !== undefined) colore2 = color2(scale2(parseFloat(o)));
else { colore2 = "rgb(128,128,128)";}
return colore2
});
});
}*/
</script>
</body>