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'。我在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);
};

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

1 个答案: