在d3.js主体中定义工具提示的CSS样式 [英] Defining CSS style for tooltip in d3.js body

问题描述

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

I'm wondering if its possible to define a CSS style for a tooltip function displayed by d3.js on mouse over event in the actual body of the definition rather than on top of the page in the style section.

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样式:

What I am looking for is something similar to this style where CSS styling is defined when object is created (for example fill):

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

推荐答案

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

You should be using style to set CSS style like this:

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

这篇关于在d3.js主体中定义工具提示的CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！