D3 круговая диаграмма перехода

Question

Я изучаю переходы в D3js, пытаясь заставить их работать с простой круговой диаграммой, которая получена из a Mike Bostock example.

Я хочу переместить данные в пироге из данных в data2, но диаграмма не обновляется.

Это переход заявление:

path.selectAll("path").data(pie(data2)).transition().duration(2000); 

Что мне не хватает?

EDIT

Я получил это работает с ниже. Теперь я хотел бы понять, почему это работает. Я понимаю часть .attr ("d", arc), но зачем мне нужно selectAll ("путь")?

path.selectAll("path").data(pie(data2)).transition().duration(2000).attr("d",arc); 

END EDIT

Полный код (JSFiddle here):

var width = 200, 
    height = 200, 
    radius = Math.min(width, height)/2; 

var color = d3.scale.category20(); 
var data = [2, 19, 18, 99, 100]; 
var data2 = [100, 1200, 20, 88, 12]; 

var pie, arc, svg, path, data; 

var chartCanvas = d3.select("#chart") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height); 


var path = chartCanvas 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 



function setupPieChart() { 

    pie = d3.layout.pie() 
     .value(function (d) { 
      return d; 
     }) 
     .sort(null); 

    arc = d3.svg.arc() 
     .innerRadius(radius - 100) 
     .outerRadius(radius - 20) 

    path 
     .selectAll("path") 
     .data(pie(data)) 
     .enter() 
     .append("path") 
     .attr("fill", function (d, i) { 
      return color(i); 
     }) 
     .attr("d", arc) 
     .each(function (d) { 
         this._current = d; 
     }); // store the initial angles 
    console.log(path); 

} 

setupPieChart(); 

console.log(path); 

path.selectAll("path").data(pie(data2)).transition().duration(2000); 

Answer 1

Я сразу вижу, что вам не хватает важной части процесса обновления. Вы скопировали исходный код, но вы забыли часть обновления :-). Я могу сказать, потому что я вижу, что в вашем коде хранятся начальные углы.

Посмотрите еще раз на код here и попробуйте понять функцию arcTween. Более подробную информацию можно найти here. Вам нужна функция tween tween для расчета новых углов на основе начальных углов (именно поэтому вы сохранили начальные углы в первую очередь :-).

В настоящий момент я не буду делать скрипку, потому что, по моему опыту, вы узнаете больше, если попытаетесь понять функцию tween tween (как я сделал here. Это ссылка на мой собственный проект, но не стесняйтесь копировать код по своему усмотрению).

Вам необходимо .selectAll («путь»), поскольку это те элементы, которые будут обновляться. При выполнении d3 попытайтесь представить элементы диаграммы следующим образом: Элементы, которые еще не видны (которые входят в коллекцию), элементы, которые теперь видны (которые можно увидеть как коллекция обновлений), и элементы, которые можно удалить (выход сбор).

Вам необходимо увидеть эти элементы на основе данных, которые вы хотите визуализировать. D3 - документы, управляемые данными, поэтому все относится к данным, которые вы хотите отображать на экране: если у вас есть данные, но нет элементов, вы делаете «ввод» элементов. Таким образом, вы выполняете выбор элементов, которые еще не находятся в DOM, но скоро это произойдет, потому что вы привяжете их к данным, которые у вас есть.

Если у вас уже есть элементы на экране, а количество элементов соответствует данным, которые необходимо показать (например: var data = [20, 30, 40]), у вас есть 3 части данных здесь для 3 div's на экране у вас есть соответствующая сумма), то d3 обновит ваш выбор (следовательно, коллекция обновлений или выбор обновления), чтобы свойства элементов соответствовали данным.

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

Answer 2

.transition начинается transition для изменения атрибутов (s) объявлена ​​после него. Вы не устанавливаете/ничего не делаете после .transition, поэтому интерполировать нечего. В оригинальном примере от Майка вы увидите, что он устанавливает атрибут d после начала перехода, указав custom interpolator (arcTween)