D3.js可缩放森伯斯特无法缩放 [英] D3.js Zoomable Sunburst not Zooming

问题描述

我有一个静态的3级森伯斯特图-

I have a static 3 level Sunburst diagram -

http://colinwhite.net/Sunburst/

此功能嵌套了我的数据

http://colinwhite.net/Sunburst/js/treeRemapper.js

我的方法基于此示例-

http://bl.ocks.org/mbostock/4348373

由于某种原因，我的缩放和补间不起作用-

For some reason my zoom and tweening is not working -

var width = 960, height = 700,
    radius = Math.min(width, height) / 2,
    color = d3.scale.category20c();

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

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

var partition = d3.layout.partition()
    .size([2 * Math.PI, radius * radius])
    .value(function(d) { return 1; });

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return Math.sqrt(d.y); })
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

d3.json("data/getJson.php", function(error, data) {

var treeData = genJSON(data, ['SourceID', 'ProviderID']);

var path = svg.selectAll("path")
    .data(partition.nodes(treeData))
    .enter().append("path")
    .attr("d", arc)
    .style("fill-rule", "evenodd")
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
     .on("click", click);

  function click(d) {
    path.transition()
      .duration(750)
      .attrTween("d", arcTween(d));
  }

});

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

有人可以告诉我我在做什么错吗?

Can anyone tell me what I'm doing wrong?

推荐答案

您引用的示例基于重新缩放"/重新调整" x和y域/范围.在您的示例中，您定义了一个不依赖于x和y标度的arc，因此，如果更改这些标度，则没有任何效果.

The example you are quoting is based on the "rescaling"/"readjusting" x and y domain/ranges. In your example, you have defined an arc that does not depend on the x and y scales, thus if you change these, there's no effect.

那你该怎么办?

首先，您需要取出partition的size(因为您将使用秤进行处理):

First you need to take out the size of the partition (as you will handle that with scales):

var partition = d3.layout.partition()
        //.size([2 * Math.PI, radius * radius])
        .value(function(d) {
            return 1;
        });

(删除它，不发表评论:))

(remove it, not comment it :) )

接下来，您必须使用和arc，它确实取决于比例，例如像示例中一样:

Next, you have to use and arc that does depend on the scales, e.g. like in the example:

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

如您所见，max和min有点挤压隐藏"段...

As you can see, the max and min are kind of squeezing the "hidden" segments...

交叉手指，运行它 (我用flare.json尝试过，它确实在这里起作用)

Cross fingers, run it (I tried it with flare.json, it did work here)

注意

如果您打算在放大时也增加权重，请看以下示例: http://bl.ocks.org/kerryrodden/477c1bfb081b783f80adof

If you plan to also add reweighting when zoomed in, have a look at this nice example: http://bl.ocks.org/kerryrodden/477c1bfb081b783f80adof

这篇关于D3.js可缩放森伯斯特无法缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！