D3.js 덴크로그램 : SVG 요소에 오래되고 새로운 속성을 바인딩합니다.
-
26-12-2019 - |
문제
D3에 대한 나의 이해는 현재 다소 한정되어 있으며 현재 D3.j의 덴크로 그램 예제로 현재 Fiddling입니다. 여러 곳에서 찾을 수 있습니다. 이 양방향 버전 예를 들어
구현할 때 노드의 원 원 직경과 같은 속성을 업데이트하려고 할 때까지 모두가 잘됩니다. (매개 변수 변경을 보는 Angularjs와 같은 대화식 프레임 워크를 사용하여) : 노드 크기가 변경됩니다. 그래서 아직 아무런 문제가 없습니다. 그러나 노드 중 하나를 클릭하면 새 파일 대신 초기화 크기로 크기가 재설정됩니다.
노드가 클릭하면 클릭 기능을 따르십시오.
var nodeEnter = node.enter().append("g")
.attr("class", "dendrogramnode2")
.on("click", click);
.
클릭 함수가 업데이트 기능을 호출합니다.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
.
은 덴크로 그램을 업데이트하고 필요한 노드를 열거 나 닫습니다.
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 80; });
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
//.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
.on("click", click);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append("text")
.attr("x", 10)
.attr("dy", ".35em")
.attr("text-anchor", "start")
//.attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length * 8.5) + ")"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
nodeUpdate.select("circle")
.attr("r", 4.5)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeUpdate.select("text")
.style("fill-opacity", 1)
.attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50) + ")"; });
// TODO: appropriate transform
var nodeExit = node.exit().transition()
.duration(duration)
//.attr("transform", function(d) { return "diagonal(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
.
이 업데이트 기능은 다음과 같습니다.
-
초기화 -> 아니오 문제 없음 (예 : 원 r= 5)
-
매개 변수가 업데이트되면 -> 아무런 문제가 없으면 매개 변수 업데이트가 업데이트됩니다. (예 : 원 R= 10)
-
노드 -> 문제점 -> 그래프를 클릭하면 초기 매개 변수가 필요합니다. (예 : 원형 R= 5)
-
코드를 적응하도록 코드를 적용하므로 오래된 것들 대신 새 매개 변수가 촬영됩니까?
-
물체로서 SVG 그룹에 파라미터를 바인딩 (아마도 효율적이지 않음)이므로 D3 선택기를 사용하는 범위에서 수동으로 도달 할 수 있습니까?
이 모든 것은 아마도 Scoping과 관련이 있으며 JavaScript는 데이터 바인딩을 처리하는 방법을 알 수 있지만이를 적절하게 수행하는 방법을 모르겠습니다. 나는 이전에있는 대신 새 속성에 액세스 할 수 있어야합니다.
에가는 방법이 있습니다.
해결책
DOT마다 다르지 않은 속성에 대해 DOM 요소에 속성을 설정했습니다.
function dograph(p){
//paramater object is passed and it's name is "p"
d3.select(elementid).selectAll("svg")[0][0]["p"] = p
//at some point update function gets called as part of an event and p is no longer available.
//someSvgElement
.on("mouseover"){update())}
function update(source) {
var p = d3.select(elementid).selectAll("svg")[0][0]["p"];
//stuff happens
}
}
.
완벽한 해결책이 아닐 수도 있지만 그것은 나를 위해 작동합니다.