it-swarm.com.de

d3 Text zum Kreis hinzufügen

Ich versuche, einen Text in den Kreis einzufügen. Ich habe das Beispiel aus ein mbostock-Tutorial befolgt, konnte aber nicht die richtige Ausgabe erhalten.

Das Code-Snippet lautet:

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]);
});

Irgendwelche Vorschläge, wie man diese Arbeit bekommt?

56
gizmo

Hier ist ein Beispiel, das Text in Kreisen mit Daten aus einer JSON-Datei zeigt: http://bl.ocks.org/4474971 . Was folgendes ergibt:

enter image description here

Die Hauptidee dahinter ist, den Text und den Kreis in dasselbe "div" zu kapseln, wie Sie es in HTML tun würden, um das Logo und den Namen der Firma in demselben div zu haben ein Seitenkopf.

Der Hauptcode ist:

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})
})

und die json datei ist:

{"nodes":[
  {"x":80, "r":40, "label":"Node 1"}, 
  {"x":200, "r":60, "label":"Node 2"}, 
  {"x":380, "r":80, "label":"Node 3"}
]}

Der resultierende HTML-Code zeigt die gewünschte Kapselung:

<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>
74

Machen Sie vielleicht einen Schritt zurück und lassen Sie den JSON fallen, bis Sie die Theorie in den Griff bekommen.

http://tributary.io/inlet/4132672/ (Live-Beispiel, wie von enjalot in diesem Video vorgestellt. Ich empfehle dringend, die anderen d3-Videos zu überprüfen, die er hat.

3
zeffii

Ich halte Folgendes für einfacher: Die allgemeine Idee ist, dass Sie ein Textelement an ein Kreiselement anhängen und dann mit den Attributen "dx" und "dy" herumspielen möchten, bis Sie den Text an der Stelle im Kreis positionieren, an der Sie sich befinden mögen. In meinem Beispiel habe ich für dx eine negative Zahl verwendet, da der Text links von der Mitte beginnen soll.

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)
2
Kenaa