0

d3.js を使用すると、階層データがあり、この例のd3 デンドログラムを使用すると、私のニーズをほぼ満たしますが、テキスト文字列をリーフとして表示する代わりに、テーブルを表示する必要があります。データは次のパターンに従います。

{"name": "root",
 "children": [
  {"name": "dtable",
   "children": [
    {"label": "la01", "tag":"section", "title":"Section One"}
    {"label": "la02", "tag":"section", "title":"Section Two"}
    {"label": "la0201", "tag":"subsection", "title":"Subsection Two:One"}
    ]
  }
}

葉を次のようにレンダリングしたいと思います。

----------------------------------------------
| label    | tag        | title              |
----------------------------------------------
| la01     | section    | Section One        |
| la02     | section    | Section Two        |
| la0201   | subsection | Subsection Two:One |
----------------------------------------------

d3 の例には、葉をテキスト文字列として表示するこのスニペットがあります。代わりにテーブルを表示するためにコードを再設計または置換する方法について途方に暮れています。

nodeEnter.append("svg:text")
  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
  .attr("dy", ".35em")
  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
  .text(function(d) { return d.name; })
  .style("fill-opacity", 1e-6);
4

1 に答える 1