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

Question

我有 sunburst 可视化，它基本上与 this CodePen (that comes from this question on Whosebug 中的代码结构相同。我还尝试包括不仅可以放大，还可以在旭日内放大（当单击旭日中间时）的可能性。我已经尝试了以下步骤，但是到目前为止，其中 none 已经奏效了，我不知道如何去做（如果这是一件很容易做的事情，我很抱歉，我是 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 那样设计它的样式，但是添加它应该不难（不确定您需要什么）。另外，我认为保持简单可能会使它更容易理解。希望这对您有所帮助，如果您需要澄清某事或在查看笔时遇到问题，请告诉我。

更新

这支笔，是我造的和另一支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 数据？

How can I use CSV data in a zoomable sunburst chart?

javascript

d3.js

sunburst-diagram