在 d3.js 正文中定义工具提示的 CSS 样式

Question

我想知道是否可以为 d3.js 在鼠标悬停事件中显示的工具提示函数定义 CSS 样式在定义的实际正文中而不是在页面顶部样式部分。

JAVASCRIPT：

    var tooltip = d3.select("#scatter-load").append("div")
        .attr("class", "tooltip")
        //.attr("position", "absolute")
        //.attr("width", "200px")
        //.attr("height", "30px")
        //.attr("pointer-events", "none")
        .style("opacity", 0);

chocolateGroup.append("circle")
    .attr("r", function(d) {return rScale(d.size);})
    .attr("opacity", 0.7)
    .style("fill", "steelblue")
    .on("mouseover", function(d) {
      tooltip.transition()
           .duration(200)
           .style("opacity", .9)
      tooltip.html(d.manufacturer + "<br/> (" + xValue(d) 
        + ", " + yValue(d) + ")")
           .style("left", (d3.event.pageX + 5) + "px")
           .style("top", (d3.event.pageY - 28) + "px");
  })
  .on("mouseout", function(d) {
      tooltip.transition()
           .duration(500)
           .style("opacity", 0);
  });

CSS：

.tooltip {
    position: absolute;
    width: 200px;
    height: 28px;
    pointer-events: none;

我正在寻找类似于这种样式的东西，其中在创建对象时定义 CSS 样式（例如填充）：

svg.append("path")
      .datum(data)
      .attr("d", area)
      .attr("fill", "steelblue");

Answer 1

您应该使用style 来设置这样的 CSS 样式：

.attr("class", "tooltip")
        .style("position", "absolute")
        .style("width", "200px")
        .style("height", "30px")
        .style("pointer-events", "none")
        .style("opacity", 0);