как добавить круг с всплывающей подсказкой к графику d3

Question

Я новичок в D3 и пытаюсь выяснить, как добавить круг на диаграмму с прикрепленной всплывающей подсказкой.Я хочу иметь возможность применять заметки к графику в разные даты и цены.Текст заметки должен появиться во всплывающей подсказке.

Вот пример , над которым я работаю.Я хочу, чтобы в x = 1 марта появился кружок по цене yy = 1000.

Я добавил div.tooltip в css так:

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

На графике должна появиться окружность в x = 1 марта 2016 года, y = 1000.0.И когда я наведу на него курсор, должна появиться надпись «Hello World».Но круг даже не появляется.В консоли Chrome нет ошибок.Что я делаю не так?

Answer 1

Селектор d3.select("#chart1") неверен, так как возвращает позицию над элементом SVG.Вы хотите выбрать элементы под элементом SVG (элементы g), чтобы вставляемые элементы note становились дочерними элементами элемента SVG.

Изменение селектора на d3.select("#chart1 svg g") решаетпроблема и показывает круг и подсказку правильно.