堆栈内存溢出
  繁体   English   中英

如何在SVG中动态显示文本

[英]How to display text dynamically in svg

 原文  2015-02-25 08:32:32  0   1    javascript/ svg/ d3.js

问题描述

我写了下面的代码。 在将文本附加到text变量的代码中，由于标签具有相同的名称，因此不会调用text内部的函数。 但是我想在单击每个按钮时更改文本输出。

示例：第一次单击按钮“ 2004”时，饼图中的文本显示为Roger Federer（45％），Marat Safin（32％）和23％。 （按键-Roger Federer，Marat Safin，为空），第二次单击2005按钮，在饼图中，文本显示为Marat Safin（32％），23％和Lleyton Hewitt（34％）。 （按键-Marat Safin，Lleyton Hewitt和空）..但我希望它显示为Marat Safin（39％），Lleyton Hewitt（34％），27％。 正如我所写，它不符合逻辑。

请帮忙！ 

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

1 个解决方案

解决方案1
 -1  2015-02-25 10:21:59

工作更新的小提琴： http : //jsfiddle.net/358nnygq/5/

需要注释掉警报以显示过渡

的HTML 

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

的CSS 

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

JS 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何动态显示div中的文本 如何动态显示表格中的文字？ 动态更改文本svg 如何在Javascript中通过svg rect显示文本 如何根据文本宽度动态调整 SVG 矩形的大小？ 如何在 SVG 中动态查找父元素内的文本元素？ 如何使用JavaScript动态调整SVG中文本元素的高度和宽度 如何使用javascript动态更改html中svg的文本内容 如何使用d3和Ajax将文本动态附加到svg？ d3.js / svg-如何将文本动态附加到弧中
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM