Переходы d3 с использованием двух наборов данных

Question

Я D3 noob, пытающийся вычислить переходы и желая работать с несколькими наборами данных. Я просмотрел другие вопросы и не нашел ответа на использование двух наборов данных. Это jsfiddle показывает, что я пытаюсь сделать. Я создаю приложение, чтобы помочь студентам-установщикам нарисовать случайные образцы. Они получат возможность установить вероятности - части диаграммы пончиков - и выберите количество ничьих для образца. Тогда пончик поворачивается, и образец появляется в виде круга.

Два набора данных: Один (pieData) содержит значения и метки для диаграммы пончиков.
другой (drawData) случайные значения от 360 до 720. В конце концов оба будут сгенерированы в R и переданы в D3, используя RJSONIO и блестящие. (Эта часть работает, jsfiddle показывает проблему)

Я определил пончик как дуги, основанные на наборе данных pieData, который я прикреплял как g.slices к моему объекту svg. Я добавил круги и дал им drawData, чтобы идентифицировать их цвета.

Для анимации вращения на пончике требуется drawData. Мой jsfiddle делает это неуклюже с циклом for, но я могу увидеть только угол последней ничьей (пять раз) вместо того, чтобы видеть пять разных углов каждый раз.

Мне не хватает нескольких ключевых моментов: Я определил функцию внутри цикла, который, как я знаю, не имеет значения. Вот моя петля над количеством ничьих, которые вращают пончик правильное количество раз, но всегда на один и тот же угол (последний).

for (var i = 0; i < nDraws; i++) { 
    ndx = i 
    arcs.transition() 
    .delay((slideDuration + spinDuration) * ndx) 
    .duration(spinDuration) 
    .ease("cubic-out") 
    .attrTween("transform", function() { 
    return d3.interpolateString("rotate(0, 0, 0)", 
     "rotate(" + spinAngle[ndx] + ", 0, 0)"); 
    }); 
} 

Я создал еще один счетчик для использования внутри моей функции, потому что «i» не прошел. Вот мой переход на круги, который делает работу ОК:

circles.each(function(d,i){ 
    var ndx = i ; 
    d3.select(this).transition() 
     // toss out the circle 
     .delay(spinDuration + (slideDuration + spinDuration) * ndx) 
     .duration(slideDuration) 
     .ease("linear") 
     .attr("cx", function(d,i) { return ndx * spacing - w /2 ; }) 
     .attr("cy", 135) 
     .attr("r", 20); 
}); 

и я пропускаю точку о том, как структурировать программу красиво. Самый близкий, который я нашел для примера, - chained transitions, из которого я узнал, что оба круга и дуги должны принадлежать общему родителю, и я должен применить два перехода к родительскому.

Помощь была бы оценен с этими вопросами:

1) Могу ли я объединить мои два набор данных (с различными столбцами и разным количеством строк

2) Как бы я построить родитель содержать как? пончики и опробованные круги, и как я могу накормить его двумя наборами данных?

3) Функции не работают для меня, как я бы хотел. Я думаю, что я пытаюсь вернуть объекты, но d3 хочет, чтобы функции возвращались (?)

Большое спасибо заранее за то, что вы узнали, как поместить все части вместе. Графики D3 прекрасны.

JimRC

Answer 1

Благодаря NoahRC, который дал мне решение. Первый блок кода должен определить функцию «я» перед циклом:

var tween = function(i){ 
    arcs.transition() 
    .delay((slideDuration + spinDuration) * i) 
    .duration(spinDuration) 
    .ease("cubic-out") 
    .attrTween("transform", function(){ 
    return d3.interpolateString("rotate(0, 0, 0)", 
         "rotate(" + data.spinAngle[i] + ", 0, 0)"); 
    }); 
    } 

for(var i = 0; i < data.nDraws; i++){ 
    tween(i); 
} 

И второй блок будет найти «я»:

circles.each(function(d,i){ 
    d3.select(this).transition() 
    .delay(spinDuration + (slideDuration + spinDuration) * i) 
    .duration(slideDuration) 
    .ease("linear") 
    .attr("cx", function() { return i * spacing - w /2 ; }) 
    .attr("cy", 135) 
    .attr("r", 20); 
}); 

Следы показали, что я получал установлен data.nDraws + 1, поэтому он не будет работать как экстрактор.