Я создал чат-бота с помощью Snatchbot, но хочу создать свой собственный пользовательский интерфейс, чтобы вести беседы на моем веб-сайте.Также я хочу визуализировать разговор в виде дерева решений, которое можно отобразить на веб-странице.Как визуализировать разговоры в древовидной структуре решений?
Это тип структуры, которую я хочу создать: https://codepen.io/NitByte/pen/KGQZZo
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;
var root ={"name":"Start","text":"Without using any instruments can you tell the difference between DNA,RNA and protein present in 3 tubes ?\n\nWhat to look for?\n[[Physcical Properties]]\n[[Chemical Properties]]","children":[{"name":"Physcical Properties","text":"Which physical property is suitable?\n1.[[Color]] \n2.[[Foam]]\n3.[[Viscosity]] \n4.[[PH]]","children":[{"name":"Color","text":"Which color is the liquid in the tube?\n[[White]],[[Green]],[[Red]]","children":[{"name":"White","text":"The Solution is colourless.Protein,RNA,DNA are not coloured and hence cannot estimate by colour.","children":[{"name":"The Solution is colourless.Protein,RNA,DNA are not coloured and hence cannot estimate by colour."}]},{"name":"Green","text":"The Solution is colourless.Protein,RNA,DNA are not coloured and hence cannot estimate by colour.","children":[{"name":"The Solution is colourless.Protein,RNA,DNA are not coloured and hence cannot estimate by colour."}]},{"name":"Red","text":"The Solution is colourless.Protein,RNA,DNA are not coloured and hence cannot estimate by colour.","children":[{"name":"The Solution is colourless.Protein,RNA,DNA are not coloured and hence cannot estimate by colour."}]}]},{"name":"Foam","text":"Is foam present?\n[[Yes]]\n[[No]]","children":[{"name":"Yes","text":"The tube contains Protein.2 tubes left.","children":[{"name":"The tube contains Protein.2 tubes left."}]},{"name":"No","text":"Is there swial?\n[[Yes->Positive]]\n[[No->Nope]]","children":[{"name":"Positive","text":"The tube contains RNA.","children":[{"name":"The tube contains RNA."}]},{"name":"Nope","text":"The tube contains DNA.","children":[{"name":"The tube contains DNA."}]}]}]},{"name":"Viscosity","text":"DNA is viscous at PH 7.0.Need PH meter.Cannot determine using viscosity.","children":[{"name":"DNA is viscous at PH 7.0.Need PH meter.Cannot determine using viscosity."}]},{"name":"PH","text":"At PH 7.0 DNA and RNA partition into af phase.\n[[PH < 7.0]]\n[[PH > 7.0]]","children":[{"name":"PH < 7.0","text":"It contains DNA in Org phase.But PH meter is required for the estimation of PH.","children":[{"name":"It contains DNA in Org phase.But PH meter is required for the estimation of PH."}]},{"name":"PH > 7.0","text":"It contains RNA in af phase.But PH meter is required for the estimation of PH.","children":[{"name":"It contains RNA in af phase.But PH meter is required for the estimation of PH."}]}]}]},{"name":"Chemical Properties","text":"Which process can be used?\nHydrolysis by [[acids]],[[alkalie]] or [[enzymes]].","children":[{"name":"acids","text":"To perform this reaction one needs instruments.Physical properties is a better option.","children":[{"name":"To perform this reaction one needs instruments.Physical properties is a better option."}]},{"name":"alkalie","text":"To perform this reaction one needs instruments.Physical properties is a better option.","children":[{"name":"To perform this reaction one needs instruments.Physical properties is a better option."}]},{"name":"enzymes","text":"To perform this reaction one needs instruments.Physical properties is a better option.","children":[{"name":"To perform this reaction one needs instruments.Physical properties is a better option."}]}]}]}
var i = 0,
duration = 750,
rectW = 500,
rectH = 60;
var tree = d3.layout.tree().nodeSize([500, 500]);
var diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.x + rectW / 2, d.y + rectH / 2];
});
var svg = d3.select("#body").append("svg").attr("width", 1000).attr("height", 1000)
.call(zm = d3.behavior.zoom().scaleExtent([1,3]).on("zoom", redraw)).append("g")
.attr("transform", "translate(" + 350 + "," + 20 + ")");
//necessary so that zoom knows where to zoom and unzoom from
zm.translate([350, 20]);
root.x0 = 0;
root.y0 = height / 2;
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse);
update(root);
d3.select("#body").style("height", "800px");
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function (d) {
d.y = d.depth * 180;
});
// 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 "translate(" + source.x0 + "," + source.y0 + ")";
})
.on("click", click);
nodeEnter.append("rect")
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "black")
.attr("stroke-width", 1)
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.append("text")
.attr("x", rectW / 2)
.attr("y", rectH / 2)
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function (d) {
return d.name;
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
nodeUpdate.select("rect")
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "black")
.attr("stroke-width", 1)
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + source.x + "," + source.y + ")";
})
.remove();
nodeExit.select("rect")
.attr("width", rectW)
.attr("height", rectH)
//.attr("width", bbox.getBBox().width)""
//.attr("height", bbox.getBBox().height)
.attr("stroke", "black")
.attr("stroke-width", 1);
nodeExit.select("text");
// 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("x", rectW / 2)
.attr("y", rectH / 2)
.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;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
//Redraw for zoom
function redraw() {
//console.log("here", d3.event.translate, d3.event.scale);
svg.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}
Я хочу создать аналогичную структуру, используя диалоги чата.Это возможно?