在d3.js中将div添加到圆圈

时间:2014-04-12 11:57:05

标签: javascript jquery html css d3.js

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

1 个答案:

答案 0 :(得分:6)

您无法将div直接注入svg元素。你有两个选择:

  1. 使用text元素,然后使用其中的tspan元素对其进行格式化。这很麻烦,但保证可以与支持SVG的任何浏览器一起使用。
  2. 使用foreignObject元素,然后在其中包含格式化的HTML(div)。浏览器对此的支持相当粗略:https://stackoverflow.com/a/4992988/987185

  3. 在这种情况下使用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属性不能以数字开头,但它们可以在大多数浏览器中使用。