D3 network diagram text

Hi I’m really struggling to add text to my d3 network digram whenever I add a svg g object It breaks the shape of the diagram any help will be much appreciated

     var networkData = {
                "nodes": [
                    { "name": "SLA Breaches", "score": 100 },
                    { "name": "RECOVER", "score": 100 },
                    { "name": "DETECT", "score": 100 },
                    { "name": "Req 12.3.3", "score": 100 },
                    { "name": "Req 1.1.1", "score": 100 },
                    { "name": "Req 6.5.4", "score": 100 },
                    { "name": "Req 8.1.6", "score": 100 },
                    { "name": "Req 2.1.3", "score": 100 },
                    { "name": "Applications", "score": 55 },
                    { "name": "Controls", "score": 55 }
                ],
                "links": [
                    { "source": 0, "target": 1, "value": 1 },
                    { "source": 0, "target": 2, "value": 1 },
                    { "source": 0, "target": 3, "value": 1 },
                    { "source": 0, "target": 4, "value": 1 },
                    { "source": 0, "target": 5, "value": 2 },
                    { "source": 0, "target": 6, "value": 3 },
                    { "source": 0, "target": 7, "value": 3 },
                    { "source": 0, "target": 8, "value": 4 },
                    { "source": 0, "target": 9, "value": 4 }        

                ]
            }

            var width = 300,
            height = 200;

            var colorNode = d3.scale.category20(),
                colorLink = d3.scale.category10();

            var force = d3.layout.force()
                .charge(-120)
                .linkDistance(55)
                .size([width, height]);

            var svg = d3.select("#explorer-sidebar-network-graph").append("svg")
                .attr("preserveAspectRatio", "xMinYMin meet")
                .attr("viewBox", "0 0 300 200")

          
            force
                .nodes(networkData.nodes)
                .links(networkData.links)
                .start();

            var link = svg.selectAll(".link")
                .data(networkData.links)
                .enter().append("line")
                .attr("class", "link")
                .style("stroke-width", 2)
                .style("stroke", "#d9d9d9");

            var node = svg.selectAll(".node")
                .data(networkData.nodes)
                .enter()
                .append("circle")
                .attr("class", "node")
                .attr("r", 12)
                .attr("stroke", function (d) {
                    if (d.score >= 0) {
                        t_hex = getInfoBoxColourHex(d.score / 10, false, 1, "");
                        return t_hex;
                    } else {
                        return '#3d6571'
                    }
                })
                .style("fill", function (d) {
                    if (d.score >= 0) {
                        t_rgb = getInfoBoxColourHex(d.score / 10, false, 1, "");
                        return t_rgb;
                    } else {
                        return '#f3f4f6'
                    }
                })
                .call(force.drag);

                node.append("text")
                    .attr("x", 12)
                    .attr("dy", ".35em")
                    .attr("text-anchor", "middle")
                    .style("font-size", (d) => {
                        if (d.name != null && d.name.length >= 14) {
                            return "8px"
                        } else {
                            return "10px"
                        }
                    })
                    .style("font-weight", "bold")
                    .style("color", "#000")
                    .text(function(d) { return d.name });

            force.on("tick", function() {
                link.attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; });

                node.attr("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; });
            });
            
        }

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.