Question

我有一个序列森伯斯特，它的中间有一个孔，用于在单击叶节点时显示数据。与THIS非常相似。

但是，现在我需要创建一个Zoomable Sunburst，但它的中间还必须有一个孔，以实现相同的数据显示目的。缩放行为必须类似于THIS。

我想出了如何通过为.range()使用不同的scale y（第45行）来设置此孔的方法。我的问题是，当我单击图表时，占位符消失了。我想我必须在.tween()内部进行某些修改，但是我不知道该怎么做。

怎么了？

var width = 960,
  height = 700,
  radius = (Math.min(width, height) / 2) - 10;

var formatNumber = d3.format(",d");

var x = d3.scaleLinear()
  .range([0, 2 * Math.PI]);

var y = d3.scaleLinear();
// .range([0, radius]);

var color = d3.scaleOrdinal(d3.schemeCategory20);

var partition = d3.partition();

var arc = d3.arc()
  .startAngle(function(d) {
    return Math.max(0, Math.min(2 * Math.PI, x(d.x0)));
  })
  .endAngle(function(d) {
    return Math.max(0, Math.min(2 * Math.PI, x(d.x1)));
  })
  .innerRadius(function(d) {
    return Math.max(0, y(d.y0));
  })
  .outerRadius(function(d) {
    return Math.max(0, y(d.y1));
  });


var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");

d3.json("https://gist.githubusercontent.com/mbostock/4348373/raw/85f18ac90409caa5529b32156aa6e71cf985263f/flare.json", function(error, root) {
  if (error) throw error;

  root = d3.hierarchy(root);
  y.range([130 - ((radius - 130) / root.height), radius]);

  root.sum(function(d) {
    return d.size;
  });
  svg.selectAll("path")
    .data(partition(root).descendants())
    .enter().append("path")
    .attr("d", arc)
    .style("fill", function(d) {
      return color((d.children ? d : d.parent).data.name);
    })
    .on("click", click)
    .append("title")
    .text(function(d) {
      return d.data.name + "\n" + formatNumber(d.value);
    });
});

function click(d) {
  svg.transition()
    .duration(750)
    .tween("scale", function() {
      var xd = d3.interpolate(x.domain(), [d.x0, d.x1]),
        yd = d3.interpolate(y.domain(), [d.y0, 1]),
        yr = d3.interpolate(y.range(), [d.y0 ? 20 : 0, radius]);
      return function(t) {
        x.domain(xd(t));
        y.domain(yd(t)).range(yr(t));
      };
    })
    .selectAll("path")
    .attrTween("d", function(d) {
      return function() {
        return arc(d);
      };
    });
}

d3.select(self.frameElement).style("height", height + "px");

path {
  stroke: #fff;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

Here is my Codepen

带有占位符的可缩放森伯斯特图表，用于文本

0 个答案: