Принудительно-ориентированный граф d3 с всплывающей подсказкой на боковой позиции - PullRequest
Новая
       51

Принудительно-ориентированный граф d3 с всплывающей подсказкой на боковой позиции

0 голосов
/ 25 февраля 2020

Я использовал следующий пример направленного графа в качестве отправной точки для разработки своего собственного ориентированного графа. http://bl.ocks.org/eyaler/10586116

Я добавил всплывающую подсказку / инфобокс со следующим кодом. Это работает нормально; когда я щелкаю узел, в верхней части узла появляется всплывающая подсказка 

<!-- INFOBOX -->
  var tip;
    svg.on("click.", function(){
        if (tip) tip.remove();
  });

  node.on("click", function(d){

    d3.event.stopPropagation(); 
    if (tip) tip.remove();

    tip  = svg.append("g")

      .attr("transform", "translate(" + d.x  + "," + d.y + ")");

    var rect = tip.append("rect")
      .style("rx", "20")
      .style("ry", "20")
      .style("fill", "white")
      .style("fill-opacity", "0.7")
      .style("stroke", "steelblue")
      .style("stroke-width", "3")
      .style("height", "150")
      .style("width", "250")
      <!-- .style("left", (window.pageXOffset + matrix.e) + "px") -->
      <!-- .style("top", (window.pageYOffset + matrix.f + 30) + "px") -->
      .style("top", (d3.event.pageY + 16) + "px")
      .style("left", (d3.event.pageX + 16) + "px")
      ;

    tip.append("text")
      .text("INFORMATIE")
      .attr("dy", "1em")
      .attr("x", 5);

    tip.append("text")
      .text("Naam: " + d.id)
      .attr("dy", "2em")
      .attr("x", 5);

    tip.append("text")
      .text("Info: " + d.info)
      .attr("dy", "3em")
      .attr("x", 5);

    var bbox = tip.node().getBBox();
    rect.attr("width", bbox.width + 5)
        .attr("height", bbox.height + 5)

  });
    <!-- END INFOBOX -->

Однако мне бы хотелось, чтобы подсказка располагалась сбоку (слева). Я попытался с помощью следующего кода: 

  var matrix = this.getScreenCTM()
    .translate(+ this.getAttribute("cx"), + this.getAttribute("cy"));

    style("left", (window.pageXOffset + matrix.e) + "px")
   .style("top", (window.pageYOffset + matrix.f + 30) + "px")

К сожалению, это не работает.

Надеюсь, кто-нибудь может помочь. Спасибо

...