javascript - D3 "Sunburst"中心路径大小

Question

所以我有一个非常标准的 D3“Sunburst”图。然而，中心路径(即根)太大了。它占据了我图表的很大一部分，由于围绕它的更重要的弧线争夺空间而被浪费了。

我正要在外环上添加标签，但我需要更多空间。

见下文。

我想让中心圆(浅灰色位)更小，外圈更厚。

谁能帮帮我？

这是我的代码:

var width = 850,
      height = 700,
      padding = 6,
      duration = 750,
      labelLimit = 120,
      radius = Math.min(width, height) / 2 - 10;

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

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

    var svg = d3.select("#wheel")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("id", "scan")
      .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");

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

    var path = svg.selectAll("path")
      .data(partition.nodes(bp.data.preparedData))
      .enter()
      .append("path")
      //.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
      .attr("d", arc)
      .attr("id", function(d) { return d.ci_type === 'type' || d.ci_type === 'provider' ? d.name : ''; })
      .attr("class", 'context')
      .attr("data-toggle", 'context')
      .attr("data-target", '#context-menu')
      .attr("data-name", function(d) { return d.name; })
      .attr("data-type", function(d) { return d.type; })
      .attr("data-provider", function(d) { return d.provider; })
      .attr("data-ci_type", function(d) { return d.ci_type; })
      .style("fill", function(d) { return bp.draw.getColor(d); });

    var text = svg.selectAll("text")
      .data(partition.nodes(bp.data.preparedData));
    var textEnter = text.enter()
      .append("text")
      .style("fill-opacity", 1)
      .style("font-weight", 200)
      //.style("letter-spacing",1)
      .style("fill", function(d) { return bp.draw.getLabelColor(d); })
      .attr("font-size", function(d) { return d.ci_type === 'type' ? 12 : 16})
      .attr("text-anchor", function(d) {
        return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
      })
      .attr("dy", ".2em")
      .attr("transform", function(d) {
        var multiline = (d.name || "").split(" ").length > 1,
          angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
          rotate = angle + (multiline ? -.5 : 0);
          return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
      })
      .attr("class", 'cursor')
      .attr("data-toggle", 'context')
      .attr("data-target", '#context-menu')
      .attr("data-name", function(d) { return d.name; })
      .attr("data-type", function(d) { return d.type; })
      .attr("data-provider", function(d) { return d.provider; })
      .attr("data-ci_type", function(d) { return d.ci_type; })
    textEnter.append("tspan")
      .attr("x", 0)
      .text(function(d) { return d.depth ? d.name : ""; });

Answer 1

环宽的非线性响应是由于 y 尺度的平方根，在这一行中:

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

如果您想要线性响应，只需将比例更改为线性，如下所示:

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

然后您应该会看到间隔均匀的环。