Javascript D3：在sunburst示例中旋转第三个和第四个四边形中的标签_Javascript_D3.js_Label_Sunburst Diagram

Javascript D3：在sunburst示例中旋转第三个和第四个四边形中的标签

javascript d3.js

Javascript D3：在sunburst示例中旋转第三个和第四个四边形中的标签,javascript,d3.js,label,sunburst-diagram,Javascript,D3.js,Label,Sunburst Diagram,我第一次使用D3和javascript绘制sunburst，下面是和的示例。第三个和第四个四边形中的标签是颠倒的。我在这里找到了咖啡轮示例，并尝试将其合并到我的示例中，但未能成功地旋转标签。我确实在这里找到了一个类似的帖子，但无法解决这个问题，因为其中一个链接不起作用 <!DOCTYPE html> <meta charset="utf-8"> <style> path { stroke: #fff; fill-rul

我第一次使用D3和javascript绘制sunburst，下面是和的示例。第三个和第四个四边形中的标签是颠倒的。我在这里找到了咖啡轮示例，并尝试将其合并到我的示例中，但未能成功地旋转标签。我确实在这里找到了一个类似的帖子，但无法解决这个问题，因为其中一个链接不起作用

<!DOCTYPE html>
<meta charset="utf-8">
<style>

    path {
        stroke: #fff;
        fill-rule: evenodd;
    }

    text {
        font-family: Arial, sans-serif;
        font-size: 12px;
    }

</style>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

        var width = 1600,
        height = 1300,
        radius = Math.min(width, height) / 2;

        var x = d3.scale.linear()
        .range([0, 2 * Math.PI]);

        var y = d3.scale.linear()
        .range([0, radius]);

        var color = d3.scale.category20c();

        var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");

        var partition = d3.layout.partition()
        .value(function(d) { return d.size; });

        var arc = d3.svg.arc()
        .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
        .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
        .innerRadius(function(d) { return Math.max(0, y(d.y)); })
        .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

        d3.json("ex.json", function(error, root) {
            var g = svg.selectAll("g")
            .data(partition.nodes(root))
            .enter().append("g");

            var path = g.append("path")
            .attr("d", arc)
            .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
            .on("click", click);

            var text = g.append("text")
            .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
            .attr("x", function(d) { return y(d.y); })
            .attr("dx", "6") // margin
            .attr("dy", ".35em") // vertical-align
            .text(function(d) { return d.name; });

            function click(d) {
                // fade out all text elements
                text.transition().attr("opacity", 0);

                path.transition()
                .duration(750)
                .attrTween("d", arcTween(d))
                .each("end", function(e, i) {
                      // check if the animated element's data e lies within the visible angle span given in d
                      if (e.x >= d.x && e.x < (d.x + d.dx)) {
                          // get a selection of the associated text element
                          var arcText = d3.select(this.parentNode).select("text");
                          // fade in the text element and recalculate positions
                          arcText.transition().duration(750)
                          .attr("opacity", 1)
                          .attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
                          .attr("x", function(d) { return y(d.y); });
                      }
                });
            }
        });

        d3.select(self.frameElement).style("height", height + "px");

        // Interpolate the scales!
        function arcTween(d) {
            var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
            yd = d3.interpolate(y.domain(), [d.y, 1]),
            yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
            return function(d, i) {
                return i
                ? function(t) { return arc(d); }
                : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
            };
        }

        function computeTextRotation(d) {
            return (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
        }

    </script>

将

computeExtratation

函数更改为以下内容：

    function computeTextRotation(d) {
        var ang = (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
        return (ang > 90) ? 180 + ang : ang;
    }

并将旋转点设置为相应圆弧的质心位置：

   var text = g.append("text")
        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
        .attr('text-anchor', function (d) { return computeTextRotation(d) > 180 ? "end" : "start"; })
        .attr("dx", "6") // margin
        .attr("dy", ".35em") // vertical-align
        .text(function(d) { return d.name; });

例如：

使用您的数据：

   var text = g.append("text")
        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
        .attr('text-anchor', function (d) { return computeTextRotation(d) > 180 ? "end" : "start"; })
        .attr("dx", "6") // margin
        .attr("dy", ".35em") // vertical-align
        .text(function(d) { return d.name; });