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

Question

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

3

我想知道是否可以在d3.js上鼠标悬停事件中定义CSS样式，而不是在页面顶部的样式部分定义。请注意，保留HTML标记。 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");

- konrad

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cyril Cherian · Accepted Answer

您应该使用style来设置CSS样式，如下所示：

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