0

So I need to add text into the center of all the circles and i tried using

.text(function(d)
                {return d.text})

but it did not work. You can only see the text when you inspect it on a browser. but it did not work. You can only see the text when you inspect it on a browser. but it did not work. You can only see the text when you inspect it on a browser. but it did not work. You can only see the text when you inspect it on a browser. but it did not work. You can only see the text when you inspect it on a browser. but it did not work. You can only see the text when you inspect it on a browser. but it did not work. You can only see the text when you inspect it on a browser. but it did not work. You can only see the text when you inspect it on a browser.

    <script type="text/javascript">

    var graph = {
        "nodes": [
            { name: "1", "group": 1, x: 300, y: 50, r: 10, connected: "1", text : "1890"},
            { name: "2", "group": 1, x: 250, y: 100, r: 10, connected: "1", text : "1892"},
            { name: "3", "group": 2, x: 220, y: 150, r: 10, connected: "2", text: "1895" },
            { name: "4", "group": 2, x: 200, y: 200, r: 10, connected: "3", text: "1898"  },
            { name: "5", "group": 2, x: 190, y: 250, r: 10, connected: "4", text: "1900"  },
            { name: "6", "group": 2, x: 180, y: 300, r: 10, connected: "5", text: "1901"  },
            { name: "7", "group": 2, x: 180, y: 350, r: 10, connected: "6", text: "1907"  },
            { name: "8", "group": 2, x: 180, y: 400, r: 10, connected: "7", text: "1910"  },
            { name: "9", "group": 2, x: 180, y: 450, r: 10, connected: "8", text: "1914"  }
        ]
    }


    $(document).ready(function () {

        var width = 1000;
        var height = 1000;


        



        var svg = d3.select("#canvas")
            
            .append("svg")
            .attr("fill", "red")
            .attr("width", width)
            .attr("height", height)

            .append("g");

        var lines = svg.attr("class", "line")
            .selectAll("line").data(graph.nodes)
            .enter()
            .append("line")
            .style("stroke", "black")                   // .text, each element append a .text 
            .attr("x1", function (d, i) {
                return d.x // x value lines
            })
            .attr("y1", function (d) {
                return d.y  // y value for lines (must be same as circle)
            })
            .attr("x2", function (d) {
                return findAttribute(d.connected).x
            })
            .attr("y2", function (d) {
                return findAttribute(d.connected).y
            })

        var circles = svg.selectAll("circle") // selects all circles
            .data(graph.nodes) // Gives them the data 
            .enter()
            .append("circle") // adapts the circles depending on the data 
            .style("stroke", "black")
            
            

            .text(function(d)
                {return d.text}) // Attempting to add text
            .attr("r", function (d, i) {
                return d.r // returns radius or circle
            })
            .attr("cx", function (d, i) {
                return d.x // x value for circles
            })
            .attr("cy", function (d, i) {
                return d.y // y value for circles 
            });

    });

    function findAttribute(name) {
        for (var i = 0, len = graph.nodes.length; i < len; i++) {
            if (graph.nodes[i].name === name)
                return graph.nodes[i]; // Return as soon as the object is found
        }
    }
</script>
Tinto
  • 1
  • Circles are only circles, you can neither append a text element to them or add text to them directly. Instead you can either use a parent `g` and then add `circle` and `text` elements to the parent `g` elements. See [here](https://stackoverflow.com/q/13615381/7106086), this approach allows you to update the positioning of both by updating the positioning of the `g`. Or add each independently, like [here](https://stackoverflow.com/a/33669511/7106086). As for centering, see [here](https://stackoverflow.com/a/54902423/7106086). – Andrew Reid Jul 06 '21 at 16:26
  • This [answer](https://stackoverflow.com/a/11109803/7106086) might also be useful. Though Gerardo's [answer](https://stackoverflow.com/a/40944183/7106086) has a working snippet. – Andrew Reid Jul 06 '21 at 16:32

0 Answers0