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>
You cannot inject a div directly into an svg element. You have two options here:
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.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/987185Example 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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments