Javascript 如何在svg路径中添加D3JS地图上的文本？
我正在制作Javascript 如何在svg路径中添加D3JS地图上的文本？,javascript,html,css,json,d3.js,Javascript,Html,Css,Json,D3.js,我正在制作D3JSUS地图我在互联网上得到了US.json文件，我用下面的图表 但我面临一个问题我没有州名json但我只想把佛罗里达州的名字写在佛罗里达州， 我成功添加了工具提示，但无法在地图上添加名称“Florida” 我想要这样： 任何人都知道如何在路径位置中添加此文本，我也共享代码： <!DOCTYPE html> <meta charset="utf-8"> <style> .background { fill: none; point
D3JS我成功添加了工具提示，但无法在地图上添加名称“Florida”<!DOCTYPE html>
<meta charset="utf-8">
<style>
.background {
fill: none;
pointer-events: all;
}
.subunit-label {
fill: #777;
fill-opacity: .5;
font-size: 20px;
font-weight: 300;
text-anchor: middle;
}
.state-boundary.active {
fill: none;
stroke: #000;
stroke-width: 0.4;
}
path {
fill: none;
stroke: #FFF;
stroke-width: .3px;
}
.onHvr{cursor:pointer; stroke: #000; }
.state-boundary{
stroke-width:.4px;
stroke: #222;
cursor:pointer;
}
path#florida {
opacity: 1;
stroke-width: 1px;
stroke: rgb(0, 0, 0);
}
.land-boundary {
stroke-width: .5px;
storke:#000;
}
.county-boundary {
stroke: #1A1A1A;
opacity:0.6;
}
.mesh {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
}
.pp2 { fill:rgb(64, 91, 201);}
.pp1 { fill: #638CD5; }
.pp3 { fill: rgb(206, 5, 5); }
.pp4 { fill: rgb(240, 69, 69); }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500,
active = d3.select(null);
var projection = d3.geo.albersUsa()
.scale(1000)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", reset);
var g = svg.append("g");
var us = {here is us.json file code I deleted becoz code is very lengthy};
g.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
.attr("d", path)
.attr("id", function(d,i){return us.objects.counties.geometries[i].id;})
.on("click", reset)
.attr("class", function(d,i) {
if (us.objects.counties.geometries[i].id == 12099 ) {
this.addEventListener("click",function(){
location.href="http://demo.govdashboard.com/dashboards?id=30543";
});
return "pp3 onHvr";
}
else if( us.objects.counties.geometries[i].id == 12011 ){return "pp2 onHvr";}
else if( us.objects.counties.geometries[i].id == 12086){return "pp4 onHvr";}
else if(i % 4 == 3){return "county-boundary pp3"}
else if(i % 4 == 2){return "county-boundary pp1"}
else if(i % 4 == 1){return "county-boundary pp2"}
else if(i % 4 == 0){return "county-boundary pp4"}
});
console.log(us.objects);
g.select(".pp1.onHvr").append("title")
.text(function(d,i){return "Palm Beach";});
g.select(".pp2.onHvr").append("title")
.text(function(d,i){return "Broward";});
g.select(".pp3.onHvr").append("title")
.text(function(d,i){return "Miami Dade";});
g.append("path")
.datum(topojson.feature(us, us.objects.land))
.attr("d", path)
.attr("class", "land-boundary");
g.selectAll()
.data(topojson.feature(us, us.objects.states).features)
.enter().insert("path")
.attr("class", "state-boundary")
.attr("d", path)
.attr("id", function(d,i) {
if (i == 48) {return "florida";}
else{return "states-boundary"}})
.attr("class", function(d,i) {
if (i % 4 == 3 || i == 48) {return "state-boundary pp1";}
else if(i % 4 == 2){return "state-boundary pp2";}
else if(i % 4 == 1 ){return "state-boundary pp3";}
else if(i % 4 == 0 ){return "state-boundary pp4";}})
.on("click", clicked);
g.select("#florida.state-boundary.pp1").append("title")
.text(function(d,i){return "Florida";});
function clicked(d) {
if (active.node() === this) return reset();
active.classed("active", false);
active = d3.select(this).classed("active", true);
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];
g.transition()
.duration(750)
.style("stroke-width", 1.5 / scale + "px")
.attr("transform", "translate(" + translate + ")scale(" + scale + ")")
}
function reset() {
active.classed("active", false);
active = d3.select(null);
g.transition()
.duration(750)
.style("stroke-width", "1.5px")
.attr("transform", "");
}
</script>
</body>
</html>
.背景{
填充：无；
指针事件：全部；
}
.亚单位标签{
填充：#777；
填充不透明度：.5；
字体大小：20px；
字体大小：300；
文本锚定：中间；
}
.州边界{
填充：无；
行程：#000；
笔划宽度：0.4；
}
路径{
填充：无；
冲程：#FFF；
笔划宽度：.3px；
}
.onHvr{光标：指针；笔划：#000；}
.国家边界{
笔划宽度：.4px；
冲程：#222；
光标：指针；
}
佛罗里达大道{
不透明度：1；
笔画宽度：1px；
笔划：rgb（0,0,0）；
}
1.土地界线{
笔划宽度：.5px；
斯托克：#000；
}
.县界{
冲程：#1A1A；
不透明度：0.6；
}
.网格{
填充：无；
冲程：#fff；
笔划线头：圆形；
笔划线条连接：圆形；
}
.pp2{fill:rgb（64,91,201）；}
.pp1{fill:#638CD5；}
.pp3{填充：rgb（206，5，5）；}
.pp4{填写：rgb（240、69、69）；}
可变宽度=960，
高度=500，
活动=d3。选择（空）；
var projection=d3.geo.albersUsa（）
.比例尺（1000）
.翻译（[宽度/2，高度/2]）；
var path=d3.geo.path（）
.投影（投影）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
svg.append（“rect”）
.attr（“类别”、“背景”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
。打开（“单击”，重置）；
var g=svg.append（“g”）；
var us={这是我删除的us.json文件代码，因为代码非常长}；
g、 选择全部（“路径”）
.data（topojson.feature（us，us.objects.countries）.features）
.enter（）.append（“路径”）
.attr（“d”，路径）
.attr（“id”，函数（d，i）{返回us.objects.countries.geometrics[i].id；}）
。打开（“单击”，重置）
.attr（“类”，函数（d，i）{
if（us.objects.countries.geometrics[i].id==12099）{
this.addEventListener（“单击”，函数（）{
location.href=”http://demo.govdashboard.com/dashboards?id=30543";
});
返回“pp3 onHvr”；
}
else if（us.objects.countries.geometrics[i].id==12011）{return“pp2 onHvr”}
else if（us.objects.countries.geometrics[i].id==12086）{return“pp4 onHvr”}
如果（i%4==3）{返回“县边界pp3”}
如果（i%4==2）{返回“县边界pp1”}
如果（i%4==1）{返回“县边界pp2”}
如果（i%4==0）{返回“县边界pp4”}
});
console.log（us.objects）；
g、 选择（“.pp1.onHvr”）。追加（“标题”）
.text（函数（d，i）{返回“棕榈滩”；}）；
g、 选择（“.pp2.onHvr”）。追加（“标题”）
.text（函数（d，i）{返回“Broward”；}）；
g、 选择（“.pp3.onHvr”）。追加（“标题”）
.text（函数（d，i）{返回“Miami-Dade”；}）；
g、 附加（“路径”）
.datum（topojson.feature（us，us.objects.land））
.attr（“d”，路径）
.attr（“类别”、“土地边界”）；
g、 selectAll（）
.data（topojson.feature（us，us.objects.states）.features）
.enter（）.insert（“路径”）
.attr（“类别”、“州边界”）
.attr（“d”，路径）
.attr（“id”，函数（d，i）{
如果（i==48）{返回“佛罗里达”；}
else{返回“状态边界”}）
.attr（“类”，函数（d，i）{
如果（i%4==3 | | i==48）{返回“状态边界pp1”}
如果（i%4==2）{返回“状态边界pp2”；}
如果（i%4==1）{返回“状态边界pp3”；}
else如果（i%4==0）{返回“状态边界pp4”；}}）
。开启（“点击”，点击）；
g、 选择（“#florida.state boundary.pp1”）。附加（“标题”）
.text（函数（d，i）{返回“佛罗里达”；}）；
单击函数（d）{
if（active.node（）==此）返回reset（）；
活动。分类（“活动”，假）；
active=d3.选择（this）.classed（“active”，true）；
变量边界=路径边界（d），
dx=边界[1][0]-边界[0][0]，
dy=边界[1][1]-边界[0][1]，
x=（界限[0][0]+界限[1][0]）/2，
y=（界限[0][1]+界限[1][1]）/2，
比例=.9/数学最大值（dx/宽度，dy/高度），
平移=[宽度/2-比例*x，高度/2-比例*y]；
g、 过渡（）
.持续时间（750）
.样式（“笔划宽度”，1.5/刻度+“px”）
.attr（“变换”、“平移”（+translate+））比例（“+scale+”）
}
函数重置（）{
活动。分类（“活动”，假）；
活动=d3。选择（空）；
g、 过渡（）
.持续时间（750）
.样式（“笔划宽度”、“1.5px”）
.attr（“transform”，简称“）；
}