如何在可缩放的日冕图中使用CSV数据

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

本文关键字：数据 CSV 缩放      更新时间：2023-09-26

我有sunburst可视化，它基本上与这个CodePen中的代码结构相同(来自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); };
};
};

但这不起作用。

有谁能帮帮我吗?

不确定你是否还需要它，但我很确定这支笔可以回答你的问题。

你发布的代码:

...
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示例相匹配。所以，在没有看到你的代码的情况下，我不能确切地告诉你问题是什么。

我创建的笔，上面提到的，包括缩放(在两个方向)，面包屑，和弧褪色。

我没有像你一直在使用的例子那样样式化它，但这应该不会太难添加(不确定你需要什么)。此外，我认为保持简单可能会让它更容易理解。希望这能有所帮助，如果你需要澄清的东西，或者如果你有问题查看笔，请告诉我。

这支笔是我构建的那支笔和另一个例子的组合，从CSV数据开始，而不是解析的JSON。

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

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

create_id函数只是我发现为树中的每个项目制作唯一id的东西:

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