Макет древовидной карты D3.js

В настоящее время я работаю над расширением примера d3 для рэпа, представленного здесь:

https://github.com/ralfstx/rap-d3charts

по диаграмме древовидной карты. Я не хочу вдаваться в подробности, если это не необходимо. Конкретная проблема возникает, когда я пытаюсь запустить макет древовидной карты в своей структуре. Эта структура состоит из «древовидной карты» в качестве корня с массивом «дочерние элементы», содержащим все прямые дочерние элементы корня с типом «ChartItem». В них есть и детские. Каждый элемент диаграммы содержит числовое значение «значение».

Я надеюсь, что это не слишком запутывает. Дело в том, что я понятия не имею, для чего нужны различные атрибуты карты дерева. Приведенная ниже конфигурация является единственной, которая «работает», показывая мне только дочерние элементы, прикрепленные к корню (древовидная карта -> это)

  • Я бы предположил, что мне не нужен атрибут .value, поскольку мои узлы уже содержат «значение». Это неправильно?

  • То же самое с атрибутами «дети» и «узлы».

  • Я понятия не имею, как установить эти атрибуты. Я знаю примеры древовидной карты d3 и справочник по API, но они мне не помогают.

    var treemap = d3.layout.treemap()
.size([500,300])
.padding(4)
.children(function(d) { return d })
.value(function(d){return d.value})
.nodes(this.children);



  var selection = this._layer.selectAll( "g.item" ) 

  var color = d3.scale.category20c();
  console.log(this);
  console.log(treemap);

  var cells = selection
    .data(treemap)
    .enter()
    .append("svg:g")
    .attr("class", "item")
    .append("rect")
    .attr("x", function(d){return d.x;})
    .attr("y", function(d){return d.y;})
    .attr("width", function(d){return d.dx;})
    .attr("height", function(d){return d.dy;})
    .attr("fill", function(d){return color(d.parent) })
    .attr("stroke", "black")
    .attr("stroke-width",1);

  var textfields =  selection
    .append("svg:text")
    .attr("opacity", 1.0)
    .attr("x", function(d){return d.x;})
    .attr("y", function(d){return d.y+20;})
    //.text(function(d){return d.children ? null : d._text;});
    .text(function(d){return d._text;});

Я был бы признателен за любую помощь, особенно за объяснение того, как следует использовать макет древовидной карты.

Заранее спасибо.


javascript d3.js treemap
person rre030    schedule 26.09.2013    source источник
comment
У вас есть объект Treemap, которым вы можете поделиться с нами? Структура.   -  person cbayram    schedule 26.09.2013

Ответы (1)


arrow_upward
4
arrow_downward

.nodes(root) и .links(nodes) используются для получения массива/списка узлов и ссылок.

Обычно вы передаете свой основной/корневой объект данных или подузел вашего дерева функции узлов и используете извлеченные из него узлы для передачи функции ссылок для определения интересующих узлов и ссылок.

Последние функции, которые вы упомянули .children(childrenAccessorFunction) и .value(valueAccessorFunction), сообщают макету карты дерева d3, как получить доступ к дочерним элементам узла в вашей структуре данных и как получить доступ к значению вашего узла в вашей структуре данных соответственно. Если не указано, d3 будет использовать node.children для получения дочернего массива узла и node.value для получения значения вашего узла. Рассмотрим приведенный ниже пример того, что я только что сказал:

var family= {
  "name": "Fred",
  "age": 81,
  "kids": [
    {
      "name": "Becky",
      "age": 51,
      "kids": [
         {"name": "John", "age": 15},
         {"name": "Jill", "age": 11}
      ]
    }
  ]
}

var treemap = d3.layout.treemap()
  .children(function(d) { return d.kids})  // instructs the algorithm to find children by looking for node.kids instead of the default node.children
  .value(function(d) { return d.age; })  // similarly, value of the nodes is the age attribute of the node

// now whenever treemap has gone through and set up your structure, you can call
var persons = treemap.node(family)   // to get all the people in the family (flat structure)
// each person object will have (after d3 enriches it)
// * parent - the parent node, or null for the root.
// * children - the array of child nodes, or null for leaf nodes.
// * value - the node value, as returned by the value accessor.
// * depth - the depth of the node, starting at 0 for the root.
// * x - the minimum x-coordinate of the node position.
// * y - the minimum y-coordinate of the node position.
// * dx - the x-extent of the node position.
// * dy - the y-extent of the node position.

var relationship = treemap.links(persons)  // this will give you the link nodes which will be objects with the following attributes
// * source - the parent node (as described above).
// * target - the child node.

Надеюсь, это имеет больше смысла.

person cbayram    schedule 26.09.2013