I am able to display text in a Rectangular node in D3.js. However, the text is extending out of the rectangular box and overlapping all the other boxes along the way, as shown in the photo below.
Can anyone please explain to me how to make sure the text starts in a new line below once the sentence reaches the edge of the box ?
Here are the files:
Main.js File:
<!DOCTYPE html> <meta charset="utf-8"> <!-- Load d3.js --> <script src="https://d3js.org/d3.v6.js"></script> <body> <!-- Create a div where the graph will take place --> <div id="my_dataviz"></div> <script> const margin = {top: 500, right: 20, bottom: 500, left: 10}, width = 3000 - margin.left - margin.right, height = 2000 - margin.top - margin.bottom; const svg = d3.select("#my_dataviz") .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("final_input.json").then( function( data) { // Initialize the links const link = svg .append("g") .selectAll("line") .data(data.links) .enter() .append("line") .style("stroke", "#000000") .style("stroke-width","7"); const simulation = d3.forceSimulation(data.nodes) // .force("x", d3.forceX(width/2).strength(0.2)) .force("link", d3.forceLink() .id(function(d) { return d.id; }) .links(data.links)) .force("charge", d3.forceManyBody().strength(-25000)) .force("center", d3.forceCenter(width/2, height/3)) .on("tick", ticked); var textNodes= svg.append("g") .selectAll("g") .data(data.nodes) .enter().append("g"); var rects=textNodes.append("rect") .attr("width",1000) .attr("height",400) .style("fill", "#69b3a2") .style("font-size","40px") .attr("stroke","black"); var texts1= textNodes.append("text") .attr("dx", 12) .attr("dy", "1.1em") .text(function(d){ return d.type; }) .style("font-size","40px"); var texts2= textNodes.append("text") .attr("dx", 12) .attr("dy", "2em") .text(function(d){ return d.snippet;}) .style("font-size","40px"); function ticked() { textNodes.attr("transform",function (d) {return "translate("+d.x+", "+d.y+")";}); 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; }); } }); </script> </body>Input file: final_input.json
{
"links": [
{
"source": 1,
"value": "1",
"target": 0
},
{
"source": 2,
"value": "1",
"target": 0
},
{
"source": 3,
"value": "1",
"target": 0
},
{
"source": 4,
"value": "1",
"target": 0
},
{
"source": 5,
"value": "1",
"target": 0
},
{
"source": 6,
"value": "1",
"target": 0
},
{
"source": 7,
"value": "1",
"target": 0
},
{
"source": 8,
"value": "1",
"target": 0
}
],
"nodes": [
{
"claimer": "Donald Trump",
"year": 2019,
"id": 0,
"type": "claim",
"date": "2019-01-27",
"snippet": "We are not even into February and the cost of illegal immigration so far this year is $18,959,495,168."
},
{
"type": "evidence",
"url": "https://www.politifact.com",
"year": 2019,
"snippet": "\"We are not even into February and the cost of illegal immigration so far this year is $18,959,495,168.",
"id": 1
},
{
"type": "evidence",
"url": "https://www.washingtonpost.com",
"year": 2019,
"snippet": "But both numbers can only be estimates; there is no actual count of undocumented immigrants, and there is a big dispute over what kind of financial drain, if any, illegal immigration places on the United States.. .",
"id": 2
},
{
"type": "evidence",
"url": "https://www.thedailybeast.com",
"year": 2019,
"snippet": "“There are at least 25,772,342 illegal aliens, not the 11,000,000 that have been reported for years, in our Country.",
"id": 3
},
{
"type": "evidence",
"url": "https://www.daytondailynews.com",
"year": "UNKNOWN",
"snippet": "“We are not even into February and the cost of illegal immigration so far this year is $18,959,495,168.",
"id": 4
},
{
"type": "evidence",
"url": "https://centurylink.net",
"year": 2019,
"snippet": "“There are at least 25,772,342 illegal aliens, not the 11,000,000 that have been reported for years, in our Country.",
"id": 5
},
{
"type": "evidence",
"url": "https://www.businessinsider.com",
"year": 2019,
"snippet": "There are at least 25,772,342 illegal aliens, not the 11,000,000 that have been reported for years, in our Country.\".",
"id": 6
},
{
"type": "evidence",
"url": "https://thehill.com",
"year": 2019,
"snippet": "There are at least 25,772,342 illegal aliens, not the 11,000,000 that have been reported for years, in our Country.",
"id": 7
},
{
"type": "evidence",
"url": "https://www.texasstandard.org",
"year": 2019,
"snippet": "There are at least 25,772,342 illegal aliens, not the 11,000,000 that have been reported for years, in our Country.",
"id": 8
}
]
}
