如何在可缩放的森伯斯特图表中使用CSV数据? [英] How can I use CSV data in a zoomable sunburst chart?

问题描述

我有森伯斯特可视化，它基本上具有与这个CodePen (来自关于stackoverflow的问题.我尝试过不仅可以放大，而且还可以在朝阳范围内(当点击进入朝阳区中间时)进行缩放.我尝试了以下步骤，但是到目前为止，这些步骤都没有起作用迷失了如何执行此操作(如果这很容易做到，我深表歉意，对此我深表歉意.)

I have sunburst visualization which basically has the same code structure as the one in this CodePen (that comes from this question on stackoverflow. I have tried to also include the possiblity to not only zoom-in, but also zoom-back within the sunburst (when clicking into the middle of the sunburst). I have tried the following steps, but none of these have worked so far and I am lost in how to do that (apologies if this is a very easy thing to do, I am very new to 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); };
};
};

但这不起作用.

有人可以帮我吗?

推荐答案

不确定您是否仍然需要它，但我很确定这支笔回答了您的问题.

Not sure if you still need it but I'm pretty sure this pen answers your question.

您发布的代码:

...

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的朝阳示例相匹配.因此，在看不到其余代码的情况下，我无法确切告诉您问题出在哪里.

all looks correct, as I said in the comment it seems to match Mike Bostock's Sunburst Example. So, without seeing the rest of your code I can't tell you exactly what the problem is.

笔包括缩放(双向)，面包屑，以及电弧褪色.

The pen I created, mentioned above, includes zooming (in both directions), breadcrumbs, and arc fading.

与您使用的示例一样，我的样式不多一直在使用，但添加起来应该不太困难(不确定您的要求).另外，我认为保持简单可能会使它更容易理解.希望对您有所帮助.如果您需要澄清某些问题，或者在使用笔时遇到问题，请与我联系.

I didn't style it as much as the example you've been using but that shouldn't be too hard to add (not sure what you require). Also, I figure keeping it simple may make it a bit easier to understand. Hope this helps, let me know if you need clarification on something or if you have issues viewing the pen.

更新

这支笔，它是示例，以CSV数据而不是解析的JSON开头.

This pen, which is a combination of the one I built and the other example, starts with CSV data instead of parsed JSON.

另一个示例使用'size'作为值键，而不是'value'.我在buildHierarchy函数中对此进行了更改，并添加了一个唯一的ID来解决悬停行为:

The other example used 'size' for the value key instead of 'value'. I changed this in the buildHierarchy function and added a unique id to fix the hover behavior:

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

create_id函数只是我找到的东西，用于为其中的每个项目制作唯一的ID.树:

The create_id function is just something I found to make unique ids for each item in the tree:

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

这篇关于如何在可缩放的森伯斯特图表中使用CSV数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！