如何在 JavaScript 中更改文本标签的堆栈顺序

Question

我正在尝试在 R 中使用 networkD3 绘制网络图。我想对显示进行一些更改，以便可以轻松读取文本标签（鼠标悬停时显示）。

有关示例，请参阅此处的链接。注意：跳转到 d3ForceNetwork 图。

如示例中所示，标签由于其颜色而难以阅读，并且经常被周围的节点遮挡。我一直在弄乱JS文件，并设法将文本标签颜色更改为黑色。但是，由于对JS或CSS一无所知（我什至无法分辨两者之间的区别），我不知道如何更改堆栈顺序，以便文本标签始终显示在任何其他对象之上。

谁能建议我如何达到预期的结果？

以下是完整的JS文件：

HTMLWidgets.widget({
   name: "forceNetwork",
   type: "output",
   initialize: function(el, width, height) {
    d3.select(el).append("svg")
        .attr("width", width)
        .attr("height", height);
    return d3.layout.force();
  },
  resize: function(el, width, height, force) {
    d3.select(el).select("svg")
        .attr("width", width)
        .attr("height", height);
    force.size([width, height]).resume();
  },
  renderValue: function(el, x, force) {
  // Compute the node radius  using the javascript math expression specified
    function nodeSize(d) {
            if(options.nodesize){
                    return eval(options.radiusCalculation);
            }else{
                    return 6}
    }

    // alias options
    var options = x.options;
    // convert links and nodes data frames to d3 friendly format
    var links = HTMLWidgets.dataframeToD3(x.links);
    var nodes = HTMLWidgets.dataframeToD3(x.nodes);
    // get the width and height
    var width = el.offsetWidth;
    var height = el.offsetHeight;
    var color = eval(options.colourScale);
    // set this up even if zoom = F
    var zoom = d3.behavior.zoom();
    // create d3 force layout
    force
      .nodes(d3.values(nodes))
      .links(links)
      .size([width, height])
      .linkDistance(options.linkDistance)
      .charge(options.charge)
      .on("tick", tick)
      .start();
    // thanks http://plnkr.co/edit/cxLlvIlmo1Y6vJyPs6N9?p=preview
    //  http://stackoverflow.com/questions/22924253/adding-pan-zoom-to-d3js-force-directed
      var drag = force.drag()
        .on("dragstart", dragstart)
      // allow force drag to work with pan/zoom drag
      function dragstart(d) {
        d3.event.sourceEvent.preventDefault();
        d3.event.sourceEvent.stopPropagation();
      }
    // select the svg element and remove existing children
    var svg = d3.select(el).select("svg");
    svg.selectAll("*").remove();
    // add two g layers; the first will be zoom target if zoom = T
    //  fine to have two g layers even if zoom = F
    svg = svg
        .append("g").attr("class","zoom-layer")
        .append("g")
    // add zooming if requested
    if (options.zoom) {
      function redraw() {
        d3.select(el).select(".zoom-layer").attr("transform",
          "translate(" + d3.event.translate + ")"+
          " scale(" + d3.event.scale + ")");
      }
      zoom.on("zoom", redraw)
      d3.select(el).select("svg")
        .attr("pointer-events", "all")
        .call(zoom);
    } else {
      zoom.on("zoom", null);
    }
    // draw links
    var link = svg.selectAll(".link")
      .data(force.links())
      .enter().append("line")
      .attr("class", "link")
      .style("stroke", function(d) { return d.colour ; })
      //.style("stroke", options.linkColour)
      .style("opacity", options.opacity)
      .style("stroke-width", eval("(" + options.linkWidth + ")"))
      .on("mouseover", function(d) {
          d3.select(this)
            .style("opacity", 1);
      })
      .on("mouseout", function(d) {
          d3.select(this)
            .style("opacity", options.opacity);
      });
    // draw nodes
    var node = svg.selectAll(".node")
      .data(force.nodes())
      .enter().append("g")
      .attr("class", "node")
      .style("fill", function(d) { return color(d.group); })
      .style("opacity", options.opacity)
      .on("mouseover", mouseover)
      .on("mouseout", mouseout)
      .on("click", click)
      .call(force.drag);
    node.append("circle")
      .attr("r", function(d){return nodeSize(d);})
      .style("stroke", "#fff")
      .style("opacity", options.opacity)
      .style("stroke-width", "1.5px");
    node.append("svg:text")
      .attr("class", "nodetext")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name })
      .style("font", options.fontSize + "px " + options.fontFamily)
      .style("opacity", options.opacityNoHover)
      .style("pointer-events", "none");
    function tick() {
      node.attr("transform", function(d) {
        if(options.bounded){ // adds bounding box
            d.x = Math.max(nodeSize(d), Math.min(width - nodeSize(d), d.x));
            d.y = Math.max(nodeSize(d), Math.min(height - nodeSize(d), d.y));
        }
        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; });
    }
    function mouseover() {
      d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", function(d){return nodeSize(d)+5;});
      d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 13)
        .style("stroke-width", ".5px")
        .style("font", options.clickTextSize + "px ")
        .style('fill', 'black')
        .style('position','relative')
        .style("opacity", 1);
    }
    function mouseout() {
      d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", function(d){return nodeSize(d);});
      d3.select(this).select("text").transition()
        .duration(1250)
        .attr("x", 0)
        .style("font", options.fontSize + "px ") 
        .style("opacity", options.opacityNoHover);
    }
    function click(d) {
      return eval(options.clickAction)
    }
    // add legend option
    if(options.legend){
        var legendRectSize = 18;
        var legendSpacing = 4;
        var legend = svg.selectAll('.legend')
          .data(color.domain())
          .enter()
          .append('g')
          .attr('class', 'legend')
          .attr('transform', function(d, i) {
            var height = legendRectSize + legendSpacing;
            var offset =  height * color.domain().length / 2;
            var horz = legendRectSize;
            var vert = i * height+4;
            return 'translate(' + horz + ',' + vert + ')';
          });
        legend.append('rect')
          .attr('width', legendRectSize)
          .attr('height', legendRectSize)
          .style('fill', color)
          .style('stroke', color);
        legend.append('text')
          .attr('x', legendRectSize + legendSpacing)
          .attr('y', legendRectSize - legendSpacing)
          .style('fill', 'darkOrange')
          .text(function(d) { return d; });
    }
    // make font-family consistent across all elements
    d3.select(el).selectAll('text').style('font-family', options.fontFamily);
  },
});

我怀疑我需要在这里对代码进行一些更改：

function mouseover() {
  d3.select(this).select("circle").transition()
    .duration(750)
    .attr("r", function(d){return nodeSize(d)+5;});
  d3.select(this).select("text").transition()
    .duration(750)
    .attr("x", 13)
    .style("stroke-width", ".5px")
    .style("font", options.clickTextSize + "px ")
    .style('fill', 'black')
    .style("opacity", 1);
}

Answer 1

您需要重新调整保存圆圈和文本的节点组，以便当前鼠标悬停的节点组是该组中的最后一个，因此绘制的最后一个节点组，使其显示在其他节点之上。在这里看到第一个答案 -->

使用 D3 更新 SVG 元素 z 索引

在您的情况下，如果您的数据没有 id 字段，您可能必须使用"name"，如下所示（适应使用鼠标悬停功能）：

function mouseover(d) {
    d3.selectAll("g.node").sort(function (a, b) { 
          if (a.name != d.name) return -1;               // a is not the hovered element, send "a" to the back
          else return 1;                             // a is the hovered element, bring "a" to the front (by making it last)
    });
    // your code continues

痛苦可能是必须对此 R 脚本生成的每个 d3 图执行此编辑，除非可以编辑 R 代码/包本身。（或者您可以向包作者建议它作为增强功能。