如何将带有工具提示的圆添加到d3图表

Question

我是D3的新手，试图弄清楚如何在带有工具提示的图表上添加圆圈。 我希望能够在不同的日期和价格下将注释应用于图表。 注释文本应在工具提示中弹出。

这是我正在研究的示例 。 我希望在x = 3月1日以ay价格= 1000出现一个圆圈。

我在css中添加了div.tooltip，如下所示：

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

在绘制图表的主要函数中，我添加了对showNotes（）的调用，如下所示：

showNotes(x,y)

其中定义了x和y：

var x = d3.scale.ordinal()
    .rangeBands([0, width]);

var y = d3.scale.linear()
    .rangeRound([height, 0]);

我在这样的数组中创建了一个音符：

var timeStamp = new Date("March 1, 2016");
var notes = [{"TIMESTAMP":timeStamp,"PRICE":1000.0,"NOTE":"Hello World!"}];

那么函数showNotes（x，y）是：

function showNotes(x,y) {
// Define the div for the tooltip
var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

d3.select("#chart1").selectAll("note")  
    .data(notes)            
    .enter().append("circle")                               
    .attr("r", 50)      
    .attr("cx", function(d) { return x(d.TIMESTAMP); })      
    .attr("cy", function(d) { return y(d.PRICE); })     
    .on("mouseover", function(d) {      
        div.transition()        
            .duration(200)      
            .style("opacity", .9);      
        div .html(d.NOTE)   
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");    
        })                  
    .on("mouseout", function(d) {       
        div.transition()        
            .duration(500)      
            .style("opacity", 0);   
    });
}

应该在图表上于2016年3月1日x = y = 1000.0处出现一个圆圈。 当我将鼠标悬停在它上面时，应该会显示“ Hello World”字样。 但是这个圈子甚至都没有出现。 chrome控制台中没有错误。 我究竟做错了什么？

Answer 1

选择器d3.select("#chart1")不正确，因为它返回了SVG元素上方的位置。 您想要选择SVG元素下的元素（ g元素），以便您插入的note元素成为SVG元素的子元素。

将选择器更改为d3.select("#chart1 svg g")可解决此问题，并正确显示圆和工具提示。