1
저는 Javascript Infovis Toolkit을 사용하는 데있어 매우 익숙합니다.하지만 5 개의 초기 노드가 중간에 연결된 하이퍼 트리를 만드는 것이 좋습니다. 그런 다음 사용자가 각 하위 노드를 클릭하면 하위 노드와 연결된 새 노드가 표시됩니다 (그 중 6 개). 나는 그것을 정확하게하는 방법을 이해할 수 없다. 다음은 나무에 대한 코드입니다.infovis hypertree nodes on demand
//now puts in tree and detailer
var infovis = document.getElementById('infovis');
var w = infovis.offsetWidth, h = infovis.offsetHeight;
var ht = new $jit.Hypertree({
//id of the visualization container
injectInto: 'infovis',
//By setting overridable=true,
//Node and Edge global properties can be
//overriden for each node/edge.
Node: {
overridable: true,
'transform': true,
type: 'circle',
},
Edge: {
overridable: true,
lineWidth: 5,
color: "lightgrey"
},
//calculate nodes offset
offset: 0.2,
//Change the animation transition type
transition: $jit.Trans.Back.easeOut,
//animation duration (in milliseconds)
duration: 1000,
//Attach event handlers on label creation.
onCreateLabel: function (domElement, node) {
domElement.innerHTML = node.name;
domElement.style.cursor = "pointer";
domElement.onclick = function() {
ht.onClick(node.id, {
hideLabels: false,
onComplete: function() {
ht.controller.onComplete();
}
});
};
},
//This method is called when moving/placing a label.
//You can add some positioning offsets to the labels here.
onPlaceLabel: function (domElement, node) {
var width = domElement.offsetWidth;
var intX = parseInt(domElement.style.left);
intX -= width/2;
domElement.style.left = intX + 'px';
},
onBeforeCompute: function (node) {
//fades info out
$("#inner-details").fadeOut(500);
},
onComplete: function() {
//Make the relations list shown in the right column.
var node = ht.graph.getClosestNodeToOrigin("current");
var html = "<h2>" + node.name + "</h2>";
html += "<p>" + node.data.Explanation + "</p>"
$jit.id('inner-details').innerHTML = html;
//fades info out
$("#inner-details").fadeIn(500);
}
});
//load JSON graph.
ht.loadJSON(json, 2);
//compute positions and plot
ht.refresh();