Как я могу использовать данные CSV в масштабируемой диаграмме солнечных лучей?

Question

У меня есть визуализация солнечных лучей, которая в основном имеет ту же структуру кода, что и в этом CodePen (что вытекает из этого вопроса о стековом потоке. Я попытался также включить возможность не только увеличения, но и уменьшения масштаба внутри солнечного луча (при нажатии на середину солнечного взрыва.) Я пробовал следующие шаги, но ни один из них не сработал до сих пор, и я теряюсь в том, как это сделать (извиняюсь, если это очень легко сделать, я очень новый к 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

Не уверен, что вам все еще это нужно, но я уверен, что эта ручка отвечает на ваш вопрос.

Код, который вы разместили:

...

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

...

все выглядит правильно, как я уже сказал в комментарии, это похоже на пример Sunburst Майка Бостока. Поэтому, не видя остальной части вашего кода, я не могу точно сказать, в чем проблема.

Упомянутое выше перо, созданное мной, включает масштабирование (в обоих направлениях), хлебные крошки и затухание дуги.

Я не придал ему особого стиля, как пример, который вы использовали, но добавить его не должно быть слишком сложно (не уверен, что вам нужно). Кроме того, я полагаю, что простота может сделать это немного легче для понимания. Надеюсь, это поможет, дайте мне знать, если вам нужно что-то прояснить или у вас есть проблемы с просмотром пера.

ОБНОВИТЬ

Эта ручка, представляющая собой комбинацию созданной мною и другого примера, начинается с данных CSV, а не с анализируемого JSON.

Другой пример использовал "размер" для ключа значения вместо "значения". Я изменил это в buildHierarchy добавили уникальный идентификатор для исправления поведения при наведении:

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

create_id Я обнаружил, что функция - это просто уникальные идентификаторы для каждого элемента дерева:

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