Html 使用动态绑定的聚合物绘制树状结构

我正在用Polymer开发一个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>

：主持人{
显示：块；
}      

聚合物( { 是‘家谱’， 特性：{ 家庭信息：{ 类型：对象， 通知：正确 }, } }); 和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>

：主持人{
显示：块；
}


{{item.id}

聚合物( { 是‘树包装器’， 特性：{ 家庭健康：{ 类型：数组， 值：[]， } }, }); 在我的index.html中

---

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

如果你能创建一个plunker，我可能可以在css方面提供帮助。

@Vishnu请在这里发布你的答案，让其他用户找到它。