0

2 リング ドーナツ チャートのラベルを正しく並べるのに問題があります。パス var の代わりに gs 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/

助けに感謝します。

4

1 に答える 1