d3.js дендрограмма :привязка старых и новых свойств к элементу svg
-
26-12-2019 - |
Вопрос
Мое понимание d3 в настоящее время довольно ограничено, и в настоящее время я работаю с примером дендрограммы D3.js.Его можно найти в нескольких местах:вкл . эта интерактивная версия например.
Когда я это реализую, все идет нормально, пока вы не попытаетесь обновить такое свойство, как диаметр окружности узлов.Если я это сделаю (используя интерактивный фреймворк, такой как AngularJS, который отслеживает изменение параметра):узлы изменяются в размерах.Так что пока никаких проблем.Однако, если я затем щелкну по одному из узлов, размер будет сброшен до размера инициализации вместо нового.
когда щелкают по узлу, он выполняет функцию click:
var nodeEnter = node.enter().append("g")
.attr("class", "dendrogramnode2")
.on("click", 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)
Все это, вероятно, имеет много общего с областью видимости и тем, как javascript обрабатывает привязку данных, но я не знаю, как сделать это правильно.Мне либо нужно иметь возможность доступа к новым свойствам вместо старых.
Есть ли способ сделать либо то, либо другое
адаптировать код таким образом, чтобы новый параметр принимался вместо старых?
привяжите параметры к группе svg как к объекту (возможно, не так эффективно?) итак, я могу вручную получить доступ к нему из любой области, используя селекторы d3?
Решение
Я установил свойство для элемента 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
}
}
возможно, это не идеальное решение, но для меня оно работает.