我的目標是讓無子節點包含超鏈接。這是我基于的 D3 插件：https : //github.com/deltoss/d3-mitch-tree Image Example
我是 JS 和 JSON 的新手，所以我很難弄清楚如何繼續，特別是因為在超鏈接和 JSON 方面幾乎沒有什么可參考的。如果有更好的方法來解決這個問題，我當然愿意接受新想法。
先感謝您
<script src="https://cdn.jsdelivr.net/gh/deltoss/[email protected]/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>
uj5u.com熱心網友回復：
在此之前鏈接此方法.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 導航離開。
取自 repo 的/examples檔案夾，在那里我找到了一個名為Advanced 的示例，其中包含 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();
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/363340.html
標籤：javascript json d3.js