Javascript 在d3.js中将div追加到圆中

我有一个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);
})); 

$（“.arc”）.on（“鼠标悬停”），（函数（）{
d3.选择（“文本”）.remove（）；
var appendingString=“”+cityName[$（this）.attr（“id”）]+“”+$（this.attr（“id”）+“%”；
组
.append（“文本”）
.attr（“x”，-30）
.attr（“y”，-10）
.文本（附录字符串）；
})); 

由于某些原因，已成功添加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>

var cityNames=[“Чббббббб”、“Мббббббббб”、“1073；
var cityPercentage=[50,30,20,10]；
可变宽度=300，
高度=300，
半径=100；
var color=d3.scale.linear（）
.domain（[0,60]）
.范围（[“红色”、“蓝色”）；
var cityDivision=d3。选择（“城市”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“类别”、“span4”）；
var group=cityDivision.append（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var arc=d3.svg.arc（）
.内半径（半径-19）
.外层（半径）；
var pie=d3.layout.pie（）
.value（函数（d）{返回d；}）；
var cityName={
50:"Челябинск",
30:"Область",
20:"Миасс",
10:"Копейск"
}
变量弧=组。选择全部（“.arc”）
.数据（pie（城市公园））
.输入（）
.附加（“g”）
.attr（“类”、“弧”）
.attr（“id”，函数（d）{返回d.data；}）；
arcs.append（“路径”）
.attr（“d”，弧）
.attr（“fill”，函数（d）{返回颜色（d.data）；}）；
//Добавление надписи в центре
组
.附加（“圆圈”）
.样式（“填充”、“白色”）
.attr（“r”，半径-20）；
$（“.arc”）.on（“鼠标悬停”，（函数（）{
d3.选择（“div.label”）.remove（）；
var appendingString=cityName[$（this.attr（“id”）]+“\n”+$（this.attr（“id”）+“%”；
组
.附加（“div”）
.attr（“类别”、“标签”）
.html（附录字符串）；
}));

不能将

div

直接注入

svg

元素。这里有两个选项：

使用

text

元素，然后在其中使用

tspan

元素对其进行格式化。这很混乱，但保证可以与任何支持SVG的浏览器一起使用

使用

foreignObject

元素，然后在其中包含格式化的HTML（div）。浏览器对此的支持相当粗略：

---

在这种情况下使用

tspan

的示例：

$(".arc").on("mouseover",(function(){
    d3.select("text").remove();
    var text = group
    .append("text")
    .attr("x",-30)
    .attr("y",-10)
    .selectAll('tspan')
    .data([cityName[$(this).attr('id')], $(this).attr('id') + '%'])
    .enter()
    .append('tspan')
      .attr('x', 0)
      .attr('dx', '-1em')
      .attr('dy', function (d, i) { return (2 * i - 1) + 'em'; })
      .text(String);

})); 

---

旁注：看起来您正在使用数字（

[0-9]*

）作为

id

属性。有效的

id

属性不能以数字开头，尽管它们在大多数浏览器中都有效

现在就像你建议的，但不是两行，而是……@SergeyScopin用一个例子更新了答案。它应该让您大致了解如何在

text

中使用

tspan

。