D3“森伯斯特”中心路径大小

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

然后你应该看到均匀分布的戒指。

Answer 2

请参阅my answer to a similar question。

以下是与环宽相关的一些演示图像：