javascript - examples - Quiero agregar texto en el enlace en el gráfico de árbol D3.js
d3 v3 min js (1)
Para los enlaces, no se puede acceder a los campos dx , dy , d.rule o similares, ya que el enlace no está asociado a un único punto de datos, pero tiene su origen y destino. Esto significa que se debe acceder a los datos de esta manera: d.source.x , d.target.y , etc.
El segmento de código de tecla debería verse así:
var link = svg.selectAll(".link")
.data(links)
.enter()
.append("g")
.attr("class", "link");
link.append("path")
.attr("fill", "none")
.attr("stroke", "#ff8888")
.attr("stroke-width", "1.5px")
.attr("d", diagonal);
link.append("text")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("fill", "Black")
.style("font", "normal 12px Arial")
.attr("transform", function(d) {
return "translate(" +
((d.source.y + d.target.y)/2) + "," +
((d.source.x + d.target.x)/2) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) {
console.log(d.target.rule);
return d.target.rule;
});
Aquí está el ejemplo de trabajo: jsfiddle
Por supuesto, puede cambiar el color, la posición, etc. del texto para adaptarlo a sus necesidades.
Espero que esto ayude.
Quiero hacer un árbol de decisión en D3.js y agregar texto en el enlace.
<!DOCTYPE html>
<meta charset="utf-8">
<body><script src="../d3-master/d3.min.js"></script>
<head><link rel="stylesheet" type="text/css" href="../D3css/D3css.css"></head>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
rect_width = 90,
rect_height = 20;
var tree = d3.layout.tree()
.size([height * 2, width / 2]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.x, d.y]; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("../data/ID3.json", function(error, root) {
var nodes = tree.nodes(root),
links = tree.links(nodes);
var link = svg.selectAll(".link")
.data(links)
.enter().append("g")
.attr("calss", "link")
.attr("fill", "none");
link.append("path")
.attr("d", diagonal)
.attr("stroke", "lightsteelblue");
link.append("text")
.data(nodes)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("y", -85)
.attr("text-anchor", "middle")
.attr("fill", "black")
.text(function(d) { return d.rule; });
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("rect")
.attr("transform", "translate(-42,-8)")
.attr("width", rect_width)
.attr("height", rect_height)
.style("fill", "lightsteelblue");
node.append("text")
.attr("dy", ".31em")
.attr("text-anchor", "middle")
.attr("transform", function(d) { return "translate(" + d.x / 128 + "," + d.y / 128 + ")"; })
.text(function(d) { return d.name; });
});
</script>
No hay texto en el enlace en la parte inferior derecha. Creo que se debía usar datos de ''nodos''. entonces, intenté usar datos ''raíz''. pero, no salgo de nada si uso datos ''raíz''.
Creo que esta parte es un problema
link.append ("text") .data (nodos)
¿Cómo debería revisar?
mis datos.
{ "name" : "0", "rule" : "null",
"children" : [{ "name" : "2", "rule" : "sunny",
"children" : [{ "name" : "no(3/100%)", "rule" : "high" },
{ "name" : "yes(2/100%)", "rule" : "normal" }]},
{ "name" : "yes(4/100%)", "rule" : "overcast" },
{ "name" : "3", "rule" : "rainy",
"children" : [{ "name" : "no(2/100%)", "rule" : "TRUE" },
{ "name" : "yes(3/100%)", "rule" : "FALSE" }]}]}