javascript - D3 wordcloud 为每个术语/单词添加背景颜色

Question

我想突出显示用户点击的每个术语/单词，并为该特定术语/单词设置一个背景框。我正在使用点击功能，我可以访问和设置单词本身的颜色，但我无法设置这个单词的背景。我怎样才能做到这一点？

这是我的绘制函数:

function draw(words) {
  d3.select("#interests").append("svg")
    .attr("width", w)
    .attr("height", h)
  .append("g")
    .attr("transform", "translate(" + [w >> 1, h >> 1] + ")")
  .selectAll("text")
    .data(words)
  .enter().append("text")
    .style("font-size", function(d) { return d.size + "px"; })
    .style("font-family", "Impact")
    .style("fill", function(d, i) { return fill(i); })
    .style("cursor", "pointer")
    .attr("text-anchor", "middle")
    .attr("transform", function(d) {
      return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
    })
    .text(function(d) { return d.text; })
    .on("click", function(d) {
        // d3.select(this).style("fill");
        d3.select(this).style("background","yellow");
        if (d.inGraph == true){
            d.inGraph = false;
            unloadInterest(d.text);
        } else {
            d.inGraph = true;
            loadInterest(d.text, "#ff0000");
        }

     });
}

Answer 1

text 元素没有background 样式或属性。要突出显示单词，您必须创建一个与文本大小相同的 rect 元素(getBBox() 用于尺寸)。

您的代码可以修改如下。

function draw(words) {
      var main_g = d3.select("#interests").append("svg")
        .attr("width", w)
        .attr("height", h)
      .append("g")
        .attr("transform", "translate(" + [w >> 1, h >> 1] + ")")

      main_g.selectAll("text")
        .data(words)
      .enter().append("text")
        .style("font-size", function(d) { return d.size + "px"; })
        .style("font-family", "Impact")
        .style("fill", function(d, i) { return fill(i); })
        .style("cursor", "pointer")
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; })
        .on("click", function(d) {
            var bbox = this.getBBox();
            main_g.insert("rect",":first-child")
              .attr("x", bbox.x)
              .attr("y", bbox.y)
              .attr("width", bbox.width)
              .attr("height", bbox.height)
              .style("fill", "yellow");


            if (d.inGraph == true){
                d.inGraph = false;
                unloadInterest(d.text);
            } else {
                d.inGraph = true;
                loadInterest(d.text, "#ff0000");
            }

         });
    }