javascript - plantilla - d3 agrega texto al círculo
plantilla divi wordpress gratis (4)
Estoy tratando de agregar algo de texto en el círculo. He estado siguiendo el ejemplo de http://mbostock.github.com/d3/tutorial/circle.html pero no he podido obtener el resultado correcto.
El fragmento de código es:
var data;
var code;
d3.json("/json/trace.json", function(json) {
data = json;
console.log(data);
// get code for visualization
code = data["code"];
alert(code);
var mainSVG = d3.select("#viz")
.append("svg")
.attr("width", 900)
.attr("height", 900);
mainSVG.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 100)
.attr("cx", 300)
.attr("cy", 300);
circle = mainSVG.selectAll("circle").data([code]);
}) ;
¿Alguna sugerencia de cómo hacer esto? ¡Muchas gracias!
Aquí hay un ejemplo que muestra algunos textos en círculos con datos de un archivo json: http://bl.ocks.org/4474971 . Que da lo siguiente:
La idea principal detrás de esto es encapsular el texto y el círculo en el mismo " div " como lo haría en html para tener el logotipo y el nombre de la empresa en el mismo div en un encabezado de página.
El código principal es:
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
d3.json("data.json", function(json) {
/* Define the data for the circles */
var elem = svg.selectAll("g")
.data(json.nodes)
/*Create and place the "blocks" containing the circle and the text */
var elemEnter = elem.enter()
.append("g")
.attr("transform", function(d){return "translate("+d.x+",80)"})
/*Create the circle for each block */
var circle = elemEnter.append("circle")
.attr("r", function(d){return d.r} )
.attr("stroke","black")
.attr("fill", "white")
/* Create the text for each block */
elemEnter.append("text")
.attr("dx", function(d){return -20})
.text(function(d){return d.label})
})
y el archivo json es:
{"nodes":[
{"x":80, "r":40, "label":"Node 1"},
{"x":200, "r":60, "label":"Node 2"},
{"x":380, "r":80, "label":"Node 3"}
]}
El código html resultante muestra la encapsulación que desea:
<svg width="960" height="500">
<g transform="translate(80,80)">
<circle r="40" stroke="black" fill="white"></circle>
<text dx="-20">Node 1</text>
</g>
<g transform="translate(200,80)">
<circle r="60" stroke="black" fill="white"></circle>
<text dx="-20">Node 2</text>
</g>
<g transform="translate(380,80)">
<circle r="80" stroke="black" fill="white"></circle>
<text dx="-20">Node 3</text>
</g>
</svg>
Esta es una forma que considero más fácil: la idea general es que desea agregar un elemento de texto a un elemento circular y luego jugar con sus atributos "dx" y "dy" hasta que coloque el texto en el punto del círculo que me gusta. En mi ejemplo, utilicé un número negativo para el dx ya que quería que el texto comenzara hacia la izquierda del centro.
const nodes = [ {id: ABC, group: 1, level: 1}, {id:XYZ, group: 2, level: 1}, ]
const nodeElems = svg.append(''g'')
.selectAll(''circle'')
.data(nodes)
.enter().append(''circle'')
.attr(''r'',radius)
.attr(''fill'', getNodeColor)
const textElems = svg.append(''g'')
.selectAll(''text'')
.data(nodes)
.enter().append(''text'')
.text(node => node.label)
.attr(''font-size'',8)//font size
.attr(''dx'', -10)//positions text towards the left of the center of the circle
.attr(''dy'',4)
Extendió el ejemplo anterior para que se ajuste a los requisitos reales, donde el círculo se rellena con un color de fondo sólido, luego con un patrón de rayas y luego el nodo de texto se coloca en el centro del círculo.
var width = 960,
height = 500,
json = {
"nodes": [{
"x": 100,
"r": 20,
"label": "Node 1",
"color": "red"
}, {
"x": 200,
"r": 25,
"label": "Node 2",
"color": "blue"
}, {
"x": 300,
"r": 30,
"label": "Node 3",
"color": "green"
}]
};
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
svg.append("defs")
.append("pattern")
.attr({
"id": "stripes",
"width": "8",
"height": "8",
"fill": "red",
"patternUnits": "userSpaceOnUse",
"patternTransform": "rotate(60)"
})
.append("rect")
.attr({
"width": "4",
"height": "8",
"transform": "translate(0,0)",
"fill": "grey"
});
function plotChart(json) {
/* Define the data for the circles */
var elem = svg.selectAll("g myCircleText")
.data(json.nodes)
/*Create and place the "blocks" containing the circle and the text */
var elemEnter = elem.enter()
.append("g")
.attr("class", "node-group")
.attr("transform", function(d) {
return "translate(" + d.x + ",80)"
})
/*Create the circle for each block */
var circleInner = elemEnter.append("circle")
.attr("r", function(d) {
return d.r
})
.attr("stroke", function(d) {
return d.color;
})
.attr("fill", function(d) {
return d.color;
});
var circleOuter = elemEnter.append("circle")
.attr("r", function(d) {
return d.r
})
.attr("stroke", function(d) {
return d.color;
})
.attr("fill", "url(#stripes)");
/* Create the text for each block */
elemEnter.append("text")
.text(function(d) {
return d.label
})
.attr({
"text-anchor": "middle",
"font-size": function(d) {
return d.r / ((d.r * 10) / 100);
},
"dy": function(d) {
return d.r / ((d.r * 25) / 100);
}
});
};
plotChart(json);
.node-group {
fill: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Salida:
A continuación se muestra el enlace al codepen también:
Gracias, Manish Kumar
Quizás, retroceda un paso y suelte al json hasta que tenga un control sobre la teoría.
http://tributary.io/inlet/4132672/ (ejemplo en vivo, presentado por enjalot en este video . Recomiendo consultar los otros videos d3 que tiene.