如何在 JSON & D3 插件中实现超链接？

Question

我的目标是让无子节点包含超链接。这是我基于的 D3 插件：https://github.com/deltoss/d3-mitch-tree Image Example

我是 JS 和 JSON 的新手，所以我很难弄清楚如何继续，特别是因为关于超链接和 JSON 几乎没有什么可参考的。如果有更好的方法来解决这个问题，我当然愿意接受新想法。

提前致谢

<script src="https://cdn.jsdelivr.net/gh/deltoss/d3-mitch-tree@1.0.2/dist/js/d3-mitch-tree.min.js"></script>

    <script>
        var data = {
            "id": 1,
            "name": "Animals",
            "type": "Root",
            "description": "A living that feeds on organic matter",
            "children": [
                {
                    "id": 6,
                    "name": "Herbivores",
                    "type": "Type",
                    "description": "Diet consists solely of plant matter",
                    "children": [
                        {
                            "id": 7,
                            "name": "Angus Cattle",
                            "type": "Organism",
                            "description": "Scottish breed of black cattle",
                            "children": []
                        },
                        {
                            "id": 8,
                            "name": "Barb Horse",
                            "type": "Organism",
                            "description": "A breed of Northern African horses with high stamina and hardiness. Their generally hot temperament makes it harder to tame.",
                            "children": []
                        }
                    ]
                }
            ]
        };

        var treePlugin = new d3.mitchTree.boxedTree()
        .setData(data)
        .setElement(document.getElementById("visualisation"))
        .setMinScale(0.5)
        .setAllowZoom(false)
        .setIdAccessor(function(data) {
                return data.id;
            })
            .setChildrenAccessor(function(data) {
                return data.children;
            })
            .setBodyDisplayTextAccessor(function(data) {
                return data.description;
            })
            .setTitleDisplayTextAccessor(function(data) {
                return data.name;
            })

                    
            .initialize();          

    </script>

Answer 1

在 .initialize() 之前链接此方法：

.on("nodeClick", function(event, index, arr) {
  if (!event.data.children.length) {
    console.log('you clicked a child-less item', event.data);
  }
})

在条件中，event.data 是点击的无子项目。随意将 URL 放在这些对象中并使用这些 URL 导航。

取自存储库的 /examples 文件夹，我在其中找到一个名为 Advanced example with Node Click Event.

的文件夹

根据同一页上的评论，您还可以使用 options 语法实现此目的：

/* const tree = [
  place your data here...
]; // */
new d3.mitchTree.boxedTree({
  events: {
    nodeClick({ data }) {
      if (!data.children.length) {
        console.log('You clicked a childless item', data);
      }
    }
  }
})
.setData(tree)
// ...rest of chain
.initialize();

如何在 JSON & D3 插件中实现超链接？

How to implement hyperlinks in JSON & D3 plugin?

javascript

json

d3.js