我有一个使用d3.js创建的甜甜圈图表,我希望在其中心放置一些信息。虽然我可以添加文本元素,但我想要放置格式化的信息,因此我决定在鼠标悬停时添加div:
$(".arc").on("mouseover",(function(){
d3.select("text").remove();
var appendingString="<tspan>"+cityName[$(this).attr("id")]+"</tspan> <tspan>"+$(this).attr("id")+"%</tspan>";
group
.append("text")
.attr("x",-30)
.attr("y",-10)
.text(appendingString);
}));
由于某些原因,div被成功添加了我需要的信息,但没有显示出来。添加它的正确方式是什么,或者有其他替代方法吗? 完整脚本如下:
<script>
var cityNames=["Челябинск","Область","Миасс","Копейск"];
var cityPercentage=[50,30,20,10];
var width=300,
height=300,
radius=100;
var color=d3.scale.linear()
.domain([0,60])
.range(["red","blue"]);
var cityDivision = d3.select("#cities")
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("class","span4");
var group=cityDivision.append("g")
.attr("transform","translate(" + width / 2 + "," + height / 2 + ")");
var arc=d3.svg.arc()
.innerRadius(radius-19)
.outerRadius(radius);
var pie= d3.layout.pie()
.value(function(d){return d;});
var cityName={
50:"Челябинск",
30:"Область",
20:"Миасс",
10:"Копейск"
}
var arcs=group.selectAll(".arc")
.data(pie(cityPercentage))
.enter()
.append("g")
.attr("class","arc")
.attr("id",function(d){return d.data;});
arcs.append("path")
.attr("d",arc)
.attr("fill",function(d){return color(d.data);});
//Добавление надписи в центре
group
.append("circle")
.style("fill","white")
.attr("r",radius-20);
$(".arc").on("mouseover",(function(){
d3.select("div.label").remove();
var appendingString=cityName[$(this).attr("id")]+"\n "+$(this).attr("id")+"%";
group
.append("div")
.attr("class","label")
.html(appendingString);
}));
</script>
text
内使用tspan
的一般想法。 - musically_ut