Appending div to circle in d3.js

Question

I have a donut bar of d3.js and I want to put some info in it's center. I can append text element, but I want to put a formatted info there, so I decided to add div on mouseover:

$(".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);
}));

For some reason div is added successfully with information I need but not displayed. What is the right way to append it, or is there some alternative ways? Full script if need:

<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>

score 6 · Accepted Answer · edited May 23 '17 at 12:22

You cannot inject a div directly into an svg element. You have two options here:

Use a text element and then tspan elements inside it to format it. This is messy but is guaranteed to work with any browser which supports SVG.
Use a foreignObject element and then include the formatted HTML (the div) inside it. The browser support for this is rather sketchy: https://stackoverflow.com/a/4992988/987185

Example of using tspan in this case:

$(".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);

}));

Sidenote: it looks like that you are using numbers ([0-9]*) as id attribute. Valid id attributes cannot start with numbers, though they work in most browsers.

Now it's like you adviced, but it is not in two lines but something like ...... — Sergey Scopin, Apr 12 '14 at 12:44
@SergeyScopin Updated the answer with an example. It should give you a general idea of how to use `tspan` inside `text`. — musically_ut, Apr 12 '14 at 13:06

Appending div to circle in d3.js

1 Answers1