我得到了三棵带有子部分的树，当我单击时，需要进行大约1.4s的运动，所以我的问题是单击时如何改善这些运动的流动性？ 我已经删除了所有可能的动画，以使其更加流畅。
这是代码：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Graphique DPGF</title>
<style>
.node rect {
cursor: pointer;
fill: #fff;
fill-opacity: 0.5;
stroke: #3182bd;
stroke-width: 1.5px;
}
#div { display: table-row; }
#div .cell { display: table-cell; vertical-align: top;}
.node text {
font: 10px sans-serif;
pointer-events: none;
}
#tabcmp {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 30px;
}
#moteur {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 15px;
font-style: italic;
font-weight: bold;
}
.link {
fill: none;
stroke: #9ecae1;
stroke-width: 1.5px;
}
img {
float: left;
margin-right: 150px;
}
#form {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 20px;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<br><p id="form">
<label for="ent1">Entreprise 1 :</label>
<select name="ent1" id="ent1">
</select>
<label style="margin-left:100px;" for="ent2">Entreprise 2 :</label>
<select name="ent2" id="ent2">
</select>
<input style="margin-left:100px;" type="radio" name="ecart" id="abs" value="abs">
<label for="abs">Absolus</label>
<input type="radio" name="ecart" id="rel" value="rel">
<label for="rel">Relatifs</label>
<button id="button" style="margin-left:100px;">Actualiser</button>
</p><br>
<center id="tabcmp">Tableau comparatif</center>
<script>
var margin = {top: 30, right: 20, bottom: 30, left: 20},
width = 400,
barHeight = 20,
barWidth = (width - margin.left - margin.right) * 0.8;
var cursorX;
var click_mult;
var cursorY;
//stack_nb variable
var nb_data = [
[], [], []
];
var ent = 0;
document.onmousemove = function(e){
cursorX = e.pageX;
cursorY = e.pageY;
}
var i = 0,
duration = 0,
root;
var all_path = [];
all_path[0] = "leJson.json";
all_path[1] = "leJson.json";
all_path[2] = "leJson.json";
var path = [];
for (var i = 0; i < 2; i++)
path[i] = all_path[i];
path[2] = "leJson.json";
create_a_tree_obj(path);
function multiple_click() {
//onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}
if (cursorX >= 0 && cursorX < 600) {
simulateClick(cursorX + 600 - window.pageXOffset, cursorY - window.pageYOffset);
simulateClick(cursorX + 1200 - window.pageXOffset, cursorY - window.pageYOffset);
}
else if (cursorX >= 600 && cursorX < 1200) {
simulateClick(cursorX - 600 - window.pageXOffset, cursorY - window.pageYOffset);
simulateClick(cursorX + 600 - window.pageXOffset, cursorY - window.pageYOffset);
}
else if (cursorX >= 1200) {
simulateClick(cursorX - 600 - window.pageXOffset, cursorY - window.pageYOffset);
simulateClick(cursorX - 1200 - window.pageXOffset, cursorY - window.pageYOffset);
}
else
console.log("no , cursorX = " + cursorX + " , cursorY = " + cursorY);
}
function add_up_svgs() {
var tmp;
setTimeout(function() {
for (var i = 0; nb_data[2][i]; i++) {
if (document.getElementById("abs").checked) {
tmp = Number(nb_data[0][i].innerHTML) - Number(nb_data[1][i].innerHTML);
if (tmp >= 0)
nb_data[2][i].innerHTML = "+" + tmp.toFixed(1);
else
nb_data[2][i].innerHTML = "" + tmp.toFixed(1);
}
else if (document.getElementById("rel").checked) {
tmp = (Number(nb_data[0][i].innerHTML) - Number(nb_data[1][i].innerHTML)) / Number(nb_data[0][i].innerHTML) * 100;
if (tmp >= 0)
nb_data[2][i].innerHTML = "+" + tmp.toFixed(1) + " %";
else
nb_data[2][i].innerHTML = "" + tmp.toFixed(1) + " %";
}
else {
tmp = Number(nb_data[0][i].innerHTML) - Number(nb_data[1][i].innerHTML);
if (tmp >= 0)
nb_data[2][i].innerHTML = "+" + tmp.toFixed(1);
else
nb_data[2][i].innerHTML = "" + tmp.toFixed(1);
}
nb_data[2][i].setAttribute("x", (288 - nb_data[2][i].innerHTML.length * 6) - 7);
}
}, 100);
}
function retrieve_content_svgs(all_g, i) {
var all_aftertext = all_g.selectAll(".node tspan.aftertext"); //On récupère tout les aftertext, rect qui contient des nombres.
var nodelist_tmp = Object.values(all_aftertext)[0][0]; //Conversion d'object à nodelist
nb_data[i] = Array.prototype.slice.call(nodelist_tmp); //Conversion Nodelist a array
}
function create_a_tree_obj(path) {
var i = 0;
var div;
var cell;
var svg_array = [];
if (i === 0) {
div = d3.select("body").append("div")
.attr("id", "div");
}
for (i ; path[i]; i++) {
var nb_ent = i + 1;
cell = div.append("div").attr("class", "cell").attr("id", "cell" + i);
svg_array[i] = cell.append("svg")
.attr("id", "d" + i)
.attr("width", 600) // + margin.left + margin.right)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
add_the_tree_graph(svg_array, path, i);
}
//Set des classe et nom pour le dernière arbre du total.
cell.attr("class", "total").attr("id", "total");
cell.select("#title").text("Comparatif");
//Addition des deux svg dans le total.
add_up_svgs();
//Appel de create_ent_form, qui permet d'ajouter le choix des entreprises en haut de la page.
if (ent === 0) {
create_ent_form(all_path);
ent++;
}
}
function create_ent_form(all_path) {
var ent1 = document.getElementById("ent1");
var ent2 = document.getElementById("ent2");
for (var i = 0; all_path[i]; i++) {
var opt = document.createElement("option");
opt.innerHTML = all_path[i];
ent1.append(opt);
}
for (var i = 0; all_path[i]; i++) {
var opt = document.createElement("option");
opt.innerHTML = all_path[i];
ent2.append(opt);
}
}
function button_clicked() {
var path_tmp = [];
document.getElementById("button").addEventListener("click", function (e) {
path_tmp[0] = document.getElementById("ent1").options[document.getElementById("ent1").selectedIndex].text;
path_tmp[1] = document.getElementById("ent2").options[document.getElementById("ent2").selectedIndex].text;
path_tmp[2] = path_tmp[0];
remove_and_replace(path_tmp);
return;
});
}
function remove_and_replace(new_path) {
var div = d3.select("#div");
div.remove();
create_a_tree_obj(new_path);
}
function add_the_tree_graph(svg_array, path, i) {
var root = [];
d3.json(path[i], function(error, json) {
if (error) throw error;
root[i] = d3.hierarchy(json);
root[i].x0 = 0;
root[i].y0 = 0;
update(root[i], svg_array[i], "d" + i, root, 0);
retrieve_content_svgs(svg_array[i], i);
});
}
function update(source, svg_var, svg_id, all_sources, check) {
// Compute the flattened node list.
var nodes = source.descendants();
var height = Math.max(50, nodes.length * barHeight + margin.top + margin.bottom);
document.getElementById(svg_id).setAttribute("height", height);
d3.select(self.frameElement).transition()
.duration(duration)
.style("height", height + "px");
// Compute the "layout". TODO https://github.com/d3/d3-hierarchy/issues/67
var index = -1;
source.eachBefore(function(n) {
n.x = ++index * barHeight;
n.y = n.depth * 20;
});
// Update the nodes…
var node = svg_var.selectAll(".node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("g")
.attr("class", function (d) {
return 'node ' + (d.children ? '' : 'child');
})
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.style("opacity", 0);
console.log(nodeEnter);
// Enter any new nodes at the parent's previous position.
nodeEnter.append("rect")
.attr("y", -barHeight / 2)
.attr("height", barHeight)
.attr("width", barWidth)
.style("fill", color)
.on("click", function(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(source, svg_var, svg_id, all_sources, 1); //recursion pour re-afficher la page dynamiquement.
click_mult = 1;
return;
});
nodeEnter.append("text")
.attr("dy", 3.5)
.attr("dx", 5.5)
.each(function (d) {
if(d.data.attributes.indexOf('|') > -1) {
var beforeText = d.data.attributes.substr(0, d.data.attributes.indexOf('|')).trim(),
afterText = d.data.attributes.substr(d.data.attributes.indexOf('|')+1, d.data.attributes.length).trim();
d3.select(this).append('tspan').classed('beforetext', true).text(beforeText);
var afterTextSpan = d3.select(this).append('tspan').classed('aftertext', true).attr("id", "afterText").text(afterText);
// position aftertext
afterTextSpan.attr('x', (288 - afterText.length * 6) - 5);
} else {
d3.select(this).text(d.data.attributes);
}
});
// Transition nodes to their new position.
nodeEnter.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1);
node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1)
.select("rect")
.style("fill", color);
// Transition exiting nodes to the parent's new position.
node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.style("opacity", 0)
.remove();
}
function simulateClick(x, y) {
var s = d3.select(document.elementFromPoint(x, y));
s.on("click")(s.datum());
}
//Click multiple
setInterval(function(e){
if (click_mult === 1) {
multiple_click();
click_mult = 0;
}
//console.log("X = " + cursorX + " Y = " + cursorY);
}, 1);
setInterval(button_clicked(), 1);
function color(d) {
return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}
</script>
这是leJson.json文件：
python - opencv morphologyEx remove specific color-文件太长，无法在此处复制