用具有动态绑定的聚合物绘制树形结构

Question

我正在开发一个使用聚合物的web应用程序，其中包含一个模块，其中我们希望将家庭结构显示为树。将鼠标悬停在每个节点上将突出显示该树的完整路径。我有一个如下的JSON。

​

​

这个JSON包含一个系列的层次结构(为了简单起见，我删除了一些节点)。

我想要像这样的树

​

​

到目前为止，我所拥有的是：

​

​

如你所见，我找不到一种方法来绘制链接。

我用来创建这个视图的代码如下：

family-tree.html

<dom-module id="family-tree">
<style>
    :host {
        display: block;
    }      
</style>
<template>
    <call-api auto file="mockdata.json" on-response="handleResponse" 
        last-response="{{familyInfo}}" handle-as="json"></call-api>
    <template is="dom-repeat" items="{{familyInfo.plugin}}">
        <div class="tree">
            <div class="node">
                <a href="#">{{item.id}}</a>
            </div>
            <tree-wrapper family-hierarchy="{{item.children}}"></tree-wrapper>
        </div>
    </template>
</template>

​

   Polymer(         {           is: 'family-tree',         properties: {             familyInfo: {                 type: Object,                 notify: true             },          }     });   

和tree-wrapper.html：

<dom-module id="tree-wrapper">
<style>
    :host {
        display: block;
    }
</style>
<template>
    <div class="item">
        <ul>
            <template is="dom-repeat" items="[[familyHeirarchy]]">
                <li>
                    <div class="node">{{item.id}}</div>
                    <tree-wrapper family-heirarchy="{{item.children}}"></tree-wrapper>
                </li>
            </template>
        </ul>
    </div>
</template>

​

   Polymer(         {         is: 'tree-wrapper',          properties: {             familyHeirarchy: {                 type: Array,                 value: [],             }         },      });   

在我的index.html中

​

这将递归地绑定并生成节点。谁能告诉我如何绘制如图所示的链接？

Answer 1

如果你可以创建一个柱塞，我也许可以帮助与css。