Определение стиля CSS для всплывающей подсказки в корпусе d3.js

Question

Мне интересно, можно ли определить стиль CSS для функции всплывающей подсказки, отображаемой d3.js на мыши над событием в фактическом теле определения, а не на вверху страницы в разделе стиля.

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);