时间戳

首页 > 解决方案 > 如何将带有工具提示的圆圈添加到 d3 图表

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

问题描述

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

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

标签： javascriptd3.jssvg

解决方案

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

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

推荐阅读