D3.js：在文本

Question

我正在使用d3.js处理径向可折叠树。目前为止看起来如何： 正如您所看到的那样，红色突出显示文本与链接重叠。我希望文本在背景颜色中“突出显示”，这样链接就不会出现在文本所在的位置。

到目前为止，我尝试使用CSS中的 background-color 和文本的.style（）来突出显示文本。

.node text {
background-color: yellow;
    font: 12px sans-serif;
    }

在绘制文本之前，我还尝试了绘制文本大小的矩形，如Mike Bostock的bar chart所示。但是，当我执行代码时，即使在源代码中通过chrome的开发人员工具也找不到矩形（圆圈有<circle>个标签，但没有矩形标记）。

这是代码的JSFiddle部分。我已经在CSS中制作了黄色的矩形，以便在它工作的情况下看得更清楚，尽管我还没能使它工作。

矩形的代码如下：

.node rect {
    fill: yellow;
}

nodeEnter.select("rect")
      .attr("height", 15)
      .attr("width", 200)
      .attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50)  + ")"; })
      //.style("fill","yellow")
;

和

nodeUpdate.select("rect")
      .attr("height", 15)
      .attr("width", 200)
      .attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50)  + ")"; })
      //.style("fill","yellow")
;

Answer 1

您必须在输入选择中select显示矩形，而不是nodeEnter.append("rect") ：

      field          allowed values
      -----          --------------
      minute         0-59
      hour           0-23
      day of month   1-31
      month          1-12 (or names, see below)
      day of week    0-7 (0 or 7 is Sunday, or use names)

这是你的小提琴：https://jsfiddle.net/wLwn9p98/