Javascript 如何在svg中动态显示文本
我已经写了下面的代码。 在将文本附加到文本变量的代码中，不会调用文本中的函数，因为标签具有相同的名称。但是，我想在单击每个按钮时更改文本输出 示例：第一次点击按钮“2004”，在饼图文本中显示为罗杰·费德勒45%、马拉特·萨芬32%和23%。钥匙-罗杰·费德勒，马拉特·萨芬，空的 第二次单击2005按钮，在饼图中，文本显示为Marat Safin 32%、23%和Lleyton Hewitt 34%。钥匙-Marat Safin、Lleyton Hewitt和empty。。但我希望它显示为马拉·萨芬39%，莱顿·休伊特34%，27%。正如我写的那样，它没有按照逻辑工作 请帮忙Javascript 如何在svg中动态显示文本,javascript,svg,d3.js,Javascript,Svg,D3.js,我已经写了下面的代码。 在将文本附加到文本变量的代码中，不会调用文本中的函数，因为标签具有相同的名称。但是，我想在单击每个按钮时更改文本输出 示例：第一次点击按钮“2004”，在饼图文本中显示为罗杰·费德勒45%、马拉特·萨芬32%和23%。钥匙-罗杰·费德勒，马拉特·萨芬，空的 第二次单击2005按钮，在饼图中，文本显示为Marat Safin 32%、23%和Lleyton Hewitt 34%。钥匙-Marat Safin、Lleyton Hewitt和empty。。但我希望它显示为马拉·
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 960px;
height: 500px;
position: relative;
}
svg {
width: 100%;
height: 100%;
}
path.slice {
stroke-width: 2px;
}
polyline {
opacity: .3;
stroke: black;
stroke-width: 2px;
fill: none;
}
</style>
<body>
<div align="center">
<button onclick="validate(2004);">2004</button>
<button onclick="validate(2005);">2005</button>
<button onclick="validate(2006);">2006</button>
<button onclick="validate(2007);">2007</button>
<button onclick="validate(2008);">2008</button>
<button onclick="validate(2009);">2009</button>
<button onclick="validate(2010);">2010</button>
<button onclick="validate(2011);">2011</button>
<button onclick="validate(2012);">2012</button>
<button onclick="validate(2013);">2013</button>
<button onclick="validate(2014);">2014</button>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var svg = d3.select("body")
.append("svg")
.append("g")
svg.append("g")
.attr("class", "slices");
svg.append("g")
.attr("class", "labels");
svg.append("g")
.attr("class", "lines");
var width = 960,
height = 450,
radius = Math.min(width, height) / 2;
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;
});
var arc = d3.svg.arc()
.outerRadius(radius * 0.8)
.innerRadius(radius * 0.4);
var outerArc = d3.svg.arc()
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9);
svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var key = function(d){
//alert(d.data.label);
return d.data.label; };
var c04 = d3.scale.ordinal()
.domain(["Roger Federer", "Marat Safin","empty"])
.range(["#98abc5", "#ff8c00","#18F8FC"]);
var c05 = d3.scale.ordinal()
.domain(["empty","Marat Safin", "Lleyton Hewitt"])
.range(["#18F8FC","#ff8c00", "#6b486b"]);
var c06 = d3.scale.ordinal()
.domain(["Marcos Baghdatis", "Roger Federer","empty"])
.range(["#a05d56", "#98abc5","#18F8FC"]);
var c07 = d3.scale.ordinal()
.domain(["empty","Roger Federer", "Fernando Gonzalez"])
.range(["#18F8FC","#98abc5", "#d0743c"]);
var c08 = d3.scale.ordinal()
.domain(["Novak Djokovic", "Jo-Wilfried Tsonga","empty"])
.range(["#7b6888", "#3E1BEE","#18F8FC"]);
var c09 = d3.scale.ordinal()
.domain(["empty","Rafael Nadal", "Roger Federer"])
.range(["#18F8FC","#000000", "#98abc5"]);
var c10 = d3.scale.ordinal()
.domain(["Roger Federer", "Andy Murray","empty"])
.range(["#98abc5", "#FFFF00","#18F8FC"]);
var c11 = d3.scale.ordinal()
.domain(["empty","Andy Murray", "Novak Djokovic"])
.range(["#18F8FC","#FFFF00", "#7b6888"]);
var c12 = d3.scale.ordinal()
.domain(["Novak Djokovic", "Rafael Nadal","empty"])
.range(["#7b6888", "#000000","#18F8FC"]);
var c13 = d3.scale.ordinal()
.domain(["empty","Andy Murray", "Novak Djokovic"])
.range(["#18F8FC","#FFFF00", "#7b6888"]);
var c14 = d3.scale.ordinal()
.domain(["Rafael Nadal", "Stanislas Wawrinka","empty"])
.range(["#000000", "#3BEE1B","#18F8FC"]);
function Year (year){ //alert(year);
if(year== '2004'){
var labels = c04.domain();
return labels.map(function(label){
if(label == 'Roger Federer')
return { label: label, value: 45 }
if(label == 'Marat Safin')
return { label: label, value: 32 }
if(label == 'empty')
return { label: label, value: 23 }
});
}
if(year== '2005'){
var labels = c05.domain();
return labels.map(function(label){
if(label == 'Marat Safin')
return { label: label, value: 39 }
if(label == 'Lleyton Hewitt')
return { label: label, value: 34 }
if(label == 'empty')
return { label: label, value: 27 }
});
}
if(year== '2006'){
var labels = c06.domain();
return labels.map(function(label){
if(label == 'Roger Federer')
return { label: label, value: 46 }
if(label == 'Marcos Baghdatis')
return { label: label, value: 38 }
if(label == 'empty')
return { label: label, value: 31 }
});
}
if(year== '2007'){
var labels = c07.domain();
return labels.map(function(label){
if(label == 'Roger Federer')
return { label: label, value: 40 }
if(label == 'Fernando Gonzalez')
return { label: label, value: 20 }
if(label == 'empty')
return { label: label, value: 40 }
});
}
if(year== '2008'){
var labels = c08.domain();
return labels.map(function(label){
if(label == 'Novak Djokovic')
return { label: label, value: 36 }
if(label == 'Jo-Wilfried Tsonga')
return { label: label, value: 29 }
if(label == 'empty')
return { label: label, value: 35 }
});
}
if(year== '2009'){
var labels = c09.domain();
return labels.map(function(label){
if(label == 'Rafael Nadal')
return { label: label, value: 40 }
if(label == 'Roger Federer')
return { label: label, value: 41 }
if(label == 'empty')
return { label: label, value: 19 }
});
}
if(year== '2010'){
var labels = c10.domain();
return labels.map(function(label){
if(label == 'Roger Federer')
return { label: label, value: 37 }
if(label == 'Andy Murray')
return { label: label, value: 32 }
if(label == 'empty')
return { label: label, value: 31 }
});
}
if(year== '2011'){
var labels = c11.domain();
return labels.map(function(label){
if(label == 'Andy Murray')
return { label: label, value: 33 }
if(label == 'Novak Djokovic')
return { label: label, value: 51 }
if(label == 'empty')
return { label: label, value: 16 }
});
}
if(year== '2012'){
var labels = c12.domain();
return labels.map(function(label){
if(label == 'Novak Djokovic')
return { label: label, value: 41 }
if(label == 'Rafael Nadal')
return { label: label, value: 34 }
if(label == 'empty')
return { label: label, value: 25 }
});
}
if(year== '2013'){
var labels = c13.domain();
return labels.map(function(label){
if(label == 'Novak Djokovic')
return { label: label, value: 33 }
if(label == 'Andy Murray')
return { label: label, value: 28 }
if(label == 'empty')
return { label: label, value: 39 }
});
}
if(year== '2014'){
var labels = c14.domain();
return labels.map(function(label){
if(label == 'Rafael Nadal')
return { label: label, value: 29 }
if(label == 'Stanislas Wawrinka')
return { label: label, value: 44 }
if(label == 'empty')
return { label: label, value: 27 }
});
}
}
var text ;
var globalYear = '';
function validate(year){
globalYear = year;
change(Year(year));
}
function change(data) {
/* ------- PIE SLICES -------*/
var slice = svg.select(".slices").selectAll("path.slice")
.data(pie(data), key);
slice.enter()
.insert("path")
.style("fill", function(d) {
if(globalYear=='2004')
return c04(d.data.label);
if(globalYear=='2005')
return c05(d.data.label);
if(globalYear=='2006')
return c06(d.data.label);
if(globalYear=='2007')
return c07(d.data.label);
if(globalYear=='2008')
return c08(d.data.label);
if(globalYear=='2009')
return c09(d.data.label);
if(globalYear=='2010')
return c10(d.data.label);
if(globalYear=='2011')
return c11(d.data.label);
if(globalYear=='2012')
return c12(d.data.label);
if(globalYear=='2013')
return c13(d.data.label);
if(globalYear=='2014')
return c14(d.data.label);
})
.attr("class", "slice");
slice
.transition().duration(1000)
.attrTween("d", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
return arc(interpolate(t));
};
})
slice.exit().remove();
/* ------- TEXT LABELS -------*/
//text.remove();
text = svg.select(".labels").selectAll("text")
.data(pie(data), key);
text.enter()
.append("text")
.attr("dy", ".35em")
.text(function(d) { //alert(d.data.label);
if(globalYear=='2004'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2005'){
if(d.data.label == 'Marat Safin'){
return 'Marat Safin (39%)';
}else if(d.data.label == 'Lleyton Hewitt'){
return 'Lleyton Hewitt (34%)';
}else if(d.data.label == 'empty'){
return '27%';
}
}
if(globalYear=='2006'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2007'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2008'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2009'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2010'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2011'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2012'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2013'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2014'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
});
function midAngle(d){
return d.startAngle + (d.endAngle - d.startAngle)/2;
}
text.transition().duration(1000)
.attrTween("transform", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
return "translate("+ pos +")";
};
})
.styleTween("text-anchor", function(d){
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
return midAngle(d2) < Math.PI ? "start":"end";
};
});
text.exit()
.remove();
/* ------- SLICE TO TEXT POLYLINES -------*/
var polyline = svg.select(".lines").selectAll("polyline")
.data(pie(data), key);
polyline.enter()
.append("polyline");
polyline.transition().duration(1000)
.attrTween("points", function(d){
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
return [arc.centroid(d2), outerArc.centroid(d2), pos];
};
});
polyline.exit()
.remove();
};
</script>
</body>
我试着做了一把小提琴：请试着修复它。我可以在任何浏览器中正常打开，但在fiddle@JonirasPress'F12'中它不起作用。然后转到控制台检查错误，修复错误，然后我们会看到结果：所需输出@AJ_91是否有问题
<body>
<div align="center">
<button onclick="validate(2004);">2004</button>
<button onclick="validate(2005);">2005</button>
<button onclick="validate(2006);">2006</button>
<button onclick="validate(2007);">2007</button>
<button onclick="validate(2008);">2008</button>
<button onclick="validate(2009);">2009</button>
<button onclick="validate(2010);">2010</button>
<button onclick="validate(2011);">2011</button>
<button onclick="validate(2012);">2012</button>
<button onclick="validate(2013);">2013</button>
<button onclick="validate(2014);">2014</button>
</div>
</body>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 960px;
height: 500px;
position: relative;
}
svg {
width: 100%;
height: 100%;
}
path.slice {
stroke-width: 2px;
}
polyline {
opacity: .3;
stroke: black;
stroke-width: 2px;
fill: none;
}
var svg = d3.select("body")
.append("svg")
.append("g")
svg.append("g")
.attr("class", "slices");
svg.append("g")
.attr("class", "labels");
svg.append("g")
.attr("class", "lines");
var width = 960,
height = 450,
radius = Math.min(width, height) / 2;
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;
});
var arc = d3.svg.arc()
.outerRadius(radius * 0.8)
.innerRadius(radius * 0.4);
var outerArc = d3.svg.arc()
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9);
svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var key = function(d){
//alert(d.data.label);
return d.data.label; };
var c04 = d3.scale.ordinal()
.domain(["Roger Federer", "Marat Safin","empty"])
.range(["#98abc5", "#ff8c00","#18F8FC"]);
var c05 = d3.scale.ordinal()
.domain(["empty","Marat Safin", "Lleyton Hewitt"])
.range(["#18F8FC","#ff8c00", "#6b486b"]);
var c06 = d3.scale.ordinal()
.domain(["Marcos Baghdatis", "Roger Federer","empty"])
.range(["#a05d56", "#98abc5","#18F8FC"]);
var c07 = d3.scale.ordinal()
.domain(["empty","Roger Federer", "Fernando Gonzalez"])
.range(["#18F8FC","#98abc5", "#d0743c"]);
var c08 = d3.scale.ordinal()
.domain(["Novak Djokovic", "Jo-Wilfried Tsonga","empty"])
.range(["#7b6888", "#3E1BEE","#18F8FC"]);
var c09 = d3.scale.ordinal()
.domain(["empty","Rafael Nadal", "Roger Federer"])
.range(["#18F8FC","#000000", "#98abc5"]);
var c10 = d3.scale.ordinal()
.domain(["Roger Federer", "Andy Murray","empty"])
.range(["#98abc5", "#FFFF00","#18F8FC"]);
var c11 = d3.scale.ordinal()
.domain(["empty","Andy Murray", "Novak Djokovic"])
.range(["#18F8FC","#FFFF00", "#7b6888"]);
var c12 = d3.scale.ordinal()
.domain(["Novak Djokovic", "Rafael Nadal","empty"])
.range(["#7b6888", "#000000","#18F8FC"]);
var c13 = d3.scale.ordinal()
.domain(["empty","Andy Murray", "Novak Djokovic"])
.range(["#18F8FC","#FFFF00", "#7b6888"]);
var c14 = d3.scale.ordinal()
.domain(["Rafael Nadal", "Stanislas Wawrinka","empty"])
.range(["#000000", "#3BEE1B","#18F8FC"]);
function Year (year){ //alert(year);
if(year== '2004'){
var labels = c04.domain();
return labels.map(function(label){
if(label == 'Roger Federer')
return { label: label, value: 45 }
if(label == 'Marat Safin')
return { label: label, value: 32 }
if(label == 'empty')
return { label: label, value: 23 }
});
}
if(year== '2005'){
var labels = c05.domain();
return labels.map(function(label){
if(label == 'Marat Safin')
return { label: label, value: 39 }
if(label == 'Lleyton Hewitt')
return { label: label, value: 34 }
if(label == 'empty')
return { label: label, value: 27 }
});
}
if(year== '2006'){
var labels = c06.domain();
return labels.map(function(label){
if(label == 'Roger Federer')
return { label: label, value: 46 }
if(label == 'Marcos Baghdatis')
return { label: label, value: 38 }
if(label == 'empty')
return { label: label, value: 31 }
});
}
if(year== '2007'){
var labels = c07.domain();
return labels.map(function(label){
if(label == 'Roger Federer')
return { label: label, value: 40 }
if(label == 'Fernando Gonzalez')
return { label: label, value: 20 }
if(label == 'empty')
return { label: label, value: 40 }
});
}
if(year== '2008'){
var labels = c08.domain();
return labels.map(function(label){
if(label == 'Novak Djokovic')
return { label: label, value: 36 }
if(label == 'Jo-Wilfried Tsonga')
return { label: label, value: 29 }
if(label == 'empty')
return { label: label, value: 35 }
});
}
if(year== '2009'){
var labels = c09.domain();
return labels.map(function(label){
if(label == 'Rafael Nadal')
return { label: label, value: 40 }
if(label == 'Roger Federer')
return { label: label, value: 41 }
if(label == 'empty')
return { label: label, value: 19 }
});
}
if(year== '2010'){
var labels = c10.domain();
return labels.map(function(label){
if(label == 'Roger Federer')
return { label: label, value: 37 }
if(label == 'Andy Murray')
return { label: label, value: 32 }
if(label == 'empty')
return { label: label, value: 31 }
});
}
if(year== '2011'){
var labels = c11.domain();
return labels.map(function(label){
if(label == 'Andy Murray')
return { label: label, value: 33 }
if(label == 'Novak Djokovic')
return { label: label, value: 51 }
if(label == 'empty')
return { label: label, value: 16 }
});
}
if(year== '2012'){
var labels = c12.domain();
return labels.map(function(label){
if(label == 'Novak Djokovic')
return { label: label, value: 41 }
if(label == 'Rafael Nadal')
return { label: label, value: 34 }
if(label == 'empty')
return { label: label, value: 25 }
});
}
if(year== '2013'){
var labels = c13.domain();
return labels.map(function(label){
if(label == 'Novak Djokovic')
return { label: label, value: 33 }
if(label == 'Andy Murray')
return { label: label, value: 28 }
if(label == 'empty')
return { label: label, value: 39 }
});
}
if(year== '2014'){
var labels = c14.domain();
return labels.map(function(label){
if(label == 'Rafael Nadal')
return { label: label, value: 29 }
if(label == 'Stanislas Wawrinka')
return { label: label, value: 44 }
if(label == 'empty')
return { label: label, value: 27 }
});
}
}
var text ;
var globalYear = '';
function validate(year){
globalYear = year;
change(Year(year));
}
function change(data) {
/* ------- PIE SLICES -------*/
var slice = svg.select(".slices").selectAll("path.slice")
.data(pie(data), key);
var x = 0, y =0;
slice.enter()
.insert("path")
.style("fill", function(d) {
if(globalYear=='2004')
return c04(d.data.label);
if(globalYear=='2005')
return c05(d.data.label);
if(globalYear=='2006')
return c06(d.data.label);
if(globalYear=='2007')
return c07(d.data.label);
if(globalYear=='2008')
return c08(d.data.label);
if(globalYear=='2009')
return c09(d.data.label);
if(globalYear=='2010')
return c10(d.data.label);
if(globalYear=='2011')
return c11(d.data.label);
if(globalYear=='2012')
return c12(d.data.label);
if(globalYear=='2013')
return c13(d.data.label);
if(globalYear=='2014')
return c14(d.data.label);
})
.attr("class", "slice");
slice
.transition().duration(1000)
.attrTween("d", function(d) {
// alert(d.data.label);
//putText();
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
return arc(interpolate(t));
};
})
slice.exit().remove();
/* ------- TEXT LABELS -------*/
//text.remove();
text = svg.select(".labels").selectAll("text")
.data(pie(data), key);
text.enter()
.append("text")
.attr("dy", ".35em")
.text(function(d) { //alert(d.data.label);
if(globalYear=='2004'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2005'){
if(d.data.label == 'Marat Safin'){
return 'Marat Safin (39%)';
}else if(d.data.label == 'Lleyton Hewitt'){
return 'Lleyton Hewitt (34%)';
}else if(d.data.label == 'empty'){
return '27%';
}
}
if(globalYear=='2006'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2007'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2008'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2009'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2010'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2011'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2012'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2013'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
if(globalYear=='2014'){
if(d.data.label == 'Roger Federer'){
return 'Roger Federer (45%)';
}else if(d.data.label == 'Marat Safin'){
return 'Marat Safin (32%)';
}else if(d.data.label == 'empty'){
return '23%';
}
}
});
function midAngle(d){
return d.startAngle + (d.endAngle - d.startAngle)/2;
}
text.transition().duration(1000)
.attrTween("transform", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
return "translate("+ pos +")";
};
})
.styleTween("text-anchor", function(d){
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
return midAngle(d2) < Math.PI ? "start":"end";
};
});
text.exit()
.remove();
/* ------- SLICE TO TEXT POLYLINES -------*/
var polyline = svg.select(".lines").selectAll("polyline")
.data(pie(data), key);
polyline.enter()
.append("polyline");
polyline.transition().duration(1000)
.attrTween("points", function(d){
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
return [arc.centroid(d2), outerArc.centroid(d2), pos];
};
});
polyline.exit()
.remove();
};