如何在可缩放的旭日形图中使用 CSV 数据？

Question

我有 sunburst 可视化，它与this CodePen 中的代码结构基本相同（来自this question on stackoverflow。我还尝试包括不仅可以放大，还可以在内部缩小旭日形（点击到旭日形中间时）。我已经尝试了以下步骤，但到目前为止这些步骤都没有奏效，我不知道如何做到这一点（抱歉，如果这是一件很容易做到的事情，我我对 JS 很陌生）。

包括在开头：

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

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

将圆弧参数改为：

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

将arcTween() 函数更改为：

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

但这不起作用。

谁能帮帮我？

Answer 1

不确定您是否仍然需要它，但我很确定 this pen 会回答您的问题。

您发布的代码：

...

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

...

一切看起来都是正确的，正如我在评论中所说，它似乎与 Mike Bostock 的 Sunburst Example 相匹配。因此，如果没有看到您的其余代码，我无法确切地告诉您问题出在哪里。

The pen 我创建的，上面提到的，包括缩放（双向）、面包屑和弧形渐变。

我没有像您一直使用的 example 那样设置它的样式，但添加起来应该不会太难（不确定您需要什么）。另外，我认为保持简单可能会使它更容易理解。希望这对您有所帮助，如果您需要澄清某些事情或者您在查看笔时遇到问题，请告诉我。

更新

This pen 是 one I built 和另一个 example 的组合，以 CSV 数据而不是解析的 JSON 开头。

另一个示例使用 'size' 作为 value 键而不是 'value'。我在 buildHierarchy 函数中更改了这一点，并添加了一个唯一的 id 来修复悬停行为：

...
childNode = {"name": nodeName, "value": size, id: create_id() };
...

create_id 函数只是我 found 为树中的每个项目创建唯一 ID：

function create_id() {
  return '_' + Math.random().toString(36).substr(2, 9);
};