Блог

Я не могу отображать текст в прямоугольных узлах в D3.js сетевой график.

Сначала я создал группы для каждого элемента массива и добавил прямоугольный узел, но ничего не отображается напрасно. Может ли кто-нибудь просмотреть мой код и предложить какие-либо изменения, чтобы код работал?

Я задаю этот вопрос, поскольку я уже реализовал большинство ответов, опубликованных ранее в Stackoverflow, но узлы вообще не отображаются.

Network.html:

 lt;!DOCTYPE htmlgt;  lt;meta charset="utf-8"gt; lt;!-- Load d3.js --gt; lt;script src="https://d3js.org/d3.v6.js"gt;lt;/scriptgt;  lt;bodygt;  lt;!-- Create a div where the graph will take place --gt;  lt;div id="my_dataviz"gt;lt;/divgt;  lt;scriptgt;   // set the dimensions and margins of the graph  const margin = {top: 20, right: 20, bottom: 40, left: 100},  width = 2000 - margin.left - margin.right,  height = 1000 - margin.top - margin.bottom;    // append the svg object to the body of the page  const svg = d3.select("#my_dataviz")  .append("svg")  .attr("width", width   margin.left   margin.right)  .attr("height", height   margin.top   margin.bottom)  //THe SVG-g aelement is used ot group SVG shapes together. Once grouped you can transform the whole group as if it was a single shape.  .append("g") //This mainly appends a 'g' element to the SVG.  .attr("transform",  `translate(${margin.left}, ${margin.top})`); //this is used to move it to the top left position.    d3.json("sample_input.json").then( function( data) {    // Initialize the links  const link = svg // we have appended the LINE for each LINK in the data.   .append("g")  .selectAll("line")  .data(data.links)  .enter()  .append("line")  .style("stroke", "#000000");   const simulation = d3.forceSimulation(data.nodes)  .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") // this is for the second lt;ggt;   .selectAll("g")  .data(data.nodes)  .enter().append("g");   var rects= textNodes.join("rect").attr("width",300)  .attr("height",90)  .style("fill", "#69b3a2")  .attr("stroke","black");    var texts= textNodes.append("text")  .text(function(d){  d.label;  });    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; });  }   });  lt;/scriptgt; lt;/bodygt;  

Входной файл json:

 {  "nodes": [  {"id": 0, "label":"Donald Trump"},  {"id": 1, "label": "https://www.politifact.com"},  {"id": 2, "label": "https://www.washingtonpost.com"},  {"id": 3, "label": "https://www.thedailybeast.com"},  {"id": 4, "label": "https://www.daytondailynews.com"},  {"id": 5, "label": "https://centurylink.net"},  {"id":6, "label": "https://www.businessinsider.com"},  {"id":7, "label": "https://thehill.com"},  {"id":8, "label": "https://www.texasstandard.org"}  ],  "links": [  {"source": 1, "target": 0},  {"source": 2, "target": 0},  {"source": 3, "target": 1},  {"source": 4, "target": 0},  {"source": 5, "target": 0}   ] }  

В результате появляются только ссылки без узлов:

Я думаю, что вы, возможно, случайно добавляете g элементы, а затем меняете их на rect добавление text . Я не уверен, что это все исправит, но здесь вы хотите «добавить», а не «присоединиться»:

 var rects= textNodes.append("rect")  .attr("width",300)  .attr("height",90)  .style("fill", "#69b3a2")  .attr("stroke","black");