Question

在我使用的示例中，定义了以下内容：

div.tooltip {   
    position: absolute;         
    text-align: center;         
    width: 60px;                    
    height: 28px;                   
    padding: 2px;               
    font: 12px sans-serif;      
    background: lightsteelblue; 
    border: 0px;        
    border-radius: 8px;         
    pointer-events: none;           
}

由于我只能使用JS，因此尝试在代码中定义它并删除HTML，如下所示：

var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
.style("opacity", 50, "position","absolute","width","28px","height","28px","background","lightsteelblue","font", "12px sans-serif","text-align","center","pointer-events","none","border-radius","0px");

但是下面的代码现在停止工作，我不知道为什么。

.on("mouseover", function(d) {      
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html(d.date + "<br/>"  + d.close)  
                .style("right", (d3.event.pageX) + "px")        
                .style("down", (d3.event.pageY - 28) + "px");   
            })

Answer 1

使用此

  .attr("style", " position: absolute; ... pointer-events: none;")

Answer 2

d3.style不支持您尝试的语法。试试这个：

var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style({   
        "position": "absolute",      
        "text-align": "center",       
        "width": "60px",
        "height": "28px",
        "padding": "2px",
        "font": "12px sans-serif",
        "background": "lightsteelblue",
        "border": "0px",
        "border-radius": "8px",
        "pointer-events": "none"
    });

代码适用于CSS，但不适用于JS中定义的样式

2 个答案: