Как обернуть текст в силовой макет d3 длинными метками? - PullRequest
Новая
       7

Как обернуть текст в силовой макет d3 длинными метками?

0 голосов
/ 20 ноября 2018

Я пытаюсь поместить текст, полученный из ответа json, в мое приложение.У меня есть два элемента SVG: прямоугольник и текст.Я хочу найти способ, которым я могу обернуть мой текст SVG так, чтобы он помещался в прямоугольнике.(Рисунок Принудительное размещение с текстовыми метками и прямоугольниками )

Это ссылка на оригинальный проект, в который я внес изменения Визуализация обсуждений Reddit 

setupGraph();

function setupGraph() {
  $(".network").empty();
  names = {};
  nodecolor = {};

  force = d3.layout.force()
    .charge(-500)
    .linkDistance(20)
    .size([width, height]);

  nodes = force.nodes(),
    links = force.links();

  force.on("tick", function() {
    svg.selectAll("line.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;
      });

    svg.selectAll("rect.node")
      .attr("x", function(d) {
        return d.x - d.curWidth / 2;
      })
      .attr("y", function(d) {
        return d.y - d.curHeight / 2;
      });


    svg.selectAll("text.node")
      .attr("x", function(d) {
        return d.x - d.curWidth / 2 + 8;
      })
      .attr("y", function(d) {
        return d.y - d.curHeight / 2 + 20;
      });
  });


  d3.select("svg").remove();
  svg = d3.select("#chart").append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "network");
}

function updateNetwork() {
  var link = svg.selectAll("line.link")
    .data(links, function(d) {
      return d.source.id + "-" + d.target.id;
    });

  link.enter().insert("svg:line", "text.node", "rect.node")
    .attr("class", "link")
    .style("stroke-width", function(d) {
      return 2;
    })
    .style("stroke", "gray")
    .style("opacity", 0.1);

  var node = svg.selectAll("rect.node")
    .data(nodes, function(d) {
      return d.id;
    });

  var node = svg.selectAll("text.node")
    .data(nodes, function(d) {
      return d.id;
    });



  var nodeEnter = node.enter().append("svg:rect")
    .attr("class", "node")
    .call(force.drag)
    .attr("width", function(d) {
      return d.curWidth;
    })
    .attr("height", function(d) {
      return d.curHeight;
    })
    .style("opacity", 1.0)
    .on("mouseover", displayTooltip)
    .on("mousemove", moveTooltip)
    .on("mouseout", removeTooltip)
    .on("mouseover", function(d) {
      d3.select(this).transition().attr("height", 100).attr("width", 100); //.style("fill", "red"); 
    })
    .call(force.drag)



  var nodeEnterr = node.enter().append("svg:text")
    .attr("class", "node")
    .text(function(d) {
      return d.name + ": " + d.body
    })
    .call(force.drag)
    .style("opacity", 1.0)
    .on("mouseover", displayTooltip)
    .on("mousemove", moveTooltip)
    .on("mouseout", removeTooltip)
    .call(force.drag)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...