Question

我无法正确排列两环甜甜圈图表标签。我认为这与将标签附加到gs var而不是路径var有关，但是如果我进行切换，标签根本不可见。最后，我希望每个标签都以每个切片的角度和半径为中心。

代码在这里：

<html>
    <body>
        <meta charset="utf-8">

        <style>
            body {
              font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
              margin: auto;
              position: relative;
              width: 960px;
            }

            text {
              font: 10px sans-serif;
            }

            form {
              position: absolute;
              right: 10px;
              top: 10px;
            }
        </style>

        <svg class="chart"></svg>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script>

            var dataset = {
              bip: [.2, .1, .3, .05, .05, .2],
              position: [0, 25, 35, 25, 15, 0]
            };

            var width = 450,
                height = 450,
                cwidth = 250;

            var color = d3.scale.category10();

            var pie = d3.layout.pie()
                .sort(null)
                .startAngle(Math.PI * -.25)
                .endAngle(Math.PI * .25)
                ;

            var arc = d3.svg.arc();

            var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height)
                .style("border", "1px solid black")
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height + ")")
                ;

            var gs = svg.selectAll("g")
                .data(d3.values(dataset))
                .enter()
                .append("g");
            var path = gs.selectAll("path")
                .data(function(d) { return pie(d); })
              .enter()
                .append("path")
                .attr("fill", function(d,i,j) { 
                    return "rgb(" + 255*(1-j) + "," + (166 + d3.round(89*d.value,0))*(1-j) + "," + d3.round(255*d.value,0)*(1-j) + ")" ;
                    })
                .attr("d", function(d, i, j) {
                    return arc.innerRadius(cwidth*j).outerRadius(cwidth-5+50*j) (d);
                    })
                    .style('stroke', 'white')
                    .style('stroke-width', 5)
                    ;

            //Labels
            gs.append("svg:text")
                .attr("transform", function(d, i, j) {
                    d.startAngle = (Math.PI * -.75 + Math.PI*i/6);
                    d.endAngle = (Math.PI * .25 + Math.PI*i/6);
                    d.innerRadius = cwidth*j;
                    d.outerRadius = cwidth-5+50*j;
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .style("fill", "white")
                .style("font", "bold 12px Arial")

                .text(function(d, i, j) { return d; });

        </script>
    </body>
</html>

示例在这里： http://jsfiddle.net/sgrossman/kzh7c8mn/

感谢帮助。

Answer 1

我认为你对gs与路径变量的关联是正确的。

我这里有一个小提琴，有点像你想要的。它为每个arc元素创建text和textPaths，并通过ID链接它们。中心并不完美，但可以通过反复试验来调整。

//Add an id to the path
    .attr("id", function(d, i, j){return 'path_' + i + '_'+ j;})

为每个数据点添加svg：text和textPath：

gs.selectAll("g").data(function (d, i, j) {
    return d;
    })
    .enter().append('svg:text')
    .attr("dx", function(d,i,j){ 
        if(j==1) {return (d * 2) + 8;} 
        else {return (d * 250) - 15;}
    })
    .attr("dy", 25)
    .append('textPath')
    .attr("stroke","white")
//Link via xlink:href
    .attr("xlink:href",function(d,i,j){
       return '#path_' + i + '_' + j;
    })
    .text(function (d, i, j) {
        return d;
    });

JSFiddle

无法正确排列d3圆环图表标签

1 个答案: