Кэшируется ли макет древовидной карты d3, когда ему передается корневой узел?

Я пытался получить древовидную карту d3 для анимации, и у меня было что-то вроде

App.svg = d3.select("#medals-tree-map").append("svg:svg")
    .style("width", App.canvasWidth)
    .style("height", App.canvasHeight)
  .append("svg:g")
    .attr("transform", "translate(-.5,-.5)")
    .attr("id", "container");

App.treemap = d3.layout.treemap()
    .size([App.canvasWidth + 1, App.canvasHeight + 1])
    .value(function(d) { return d.number; })
    .sticky(true);

function drawGraphFromJson(data) {
  // Draw the graph
  var leaves = App.treemap(data);

  var cell = App.svg.selectAll("g.cell")
    .data(leaves);

  // More rendering code
}

На основе этого ответа: https://stackoverflow.com/a/9650825/111884

Однако карта дерева вообще не меняется, когда я вызываю drawGraphFromJson с новыми данными.

Я исправил проблему, определив App.treemap внутри drawGraphFromJson, т.е.

function drawGraphFromJson(data) {
  App.treemap = d3.layout.treemap()
    .size([App.canvasWidth + 1, App.canvasHeight + 1])
    .value(function(d) { return d.number; })
    .sticky(true);

  // Draw the graph
  var leaves = App.treemap(data);

  var cell = App.svg.selectAll("g.cell")
    .data(leaves);

  // More rendering code
}

Зачем мне это делать? Кэшируется ли treemap при передаче корневого узла?


javascript d3.js treemap
person zlog    schedule 09.05.2012    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Да, макет частично кэшируется, если вы установите treemap.sticky(true). См. документацию для treemap.sticky.

Ожидание от treemap.sticky заключается в том, что вы используете тот же корневой узел в качестве входных данных для макета, но вы изменяете функцию значения, чтобы изменить размер дочерних узлов. См. визуализацию древовидной карты на веб-сайте D3, где приведен пример изменения функции значения с помощью фиксированного макета древовидной карты. Причина этого ограничения в том, что при фиксированном макете топология дерева не может измениться — у вас должно быть одинаковое количество узлов в одной и той же иерархии. Единственное, что меняется, это стоимость.

Итак, если вы вызываете drawGraphFromJson с двумя разными наборами данных, вам нужно либо установить treemap.sticky(false), либо вам нужно объединить два набора данных в одну иерархию, а затем изменить функцию значения для анимации между ними.

Кроме того: вы не включили свой код рендеринга, поэтому, возможно, возникла ошибка при объединении данных. Тем не менее, я думаю, что липкое объяснение более вероятно. Объяснение см. в разделе Размышление с объединениями.

person mbostock    schedule 09.05.2012
comment
Ах, это был именно флаг sticky. Спасибо! Классный фреймворк кстати =) - person zlog; 10.05.2012
comment
Возможно ли, что изменение sticky с true на false также изменит положение тех же узлов рисования (я использую .mode("slice-dice"))? - person Matteo Guarnerio; 26.08.2016