Javascript 如何在D3鼠标上方添加文本？_Javascript_D3.js

Javascript 如何在D3鼠标上方添加文本？

javascript d3.js

Javascript 如何在D3鼠标上方添加文本？,javascript,d3.js,Javascript,D3.js,我正在做D3中的热图，我不知道如何在鼠标上方添加文本。我不知道如何进行。如果你能给我一些线索，我将不胜感激。在下面的代码片段中，您可以找到代码。工作和非工作代码块。谢谢 console.log(d3) let screenWidth = 800 let screenHeight = 400 //load data d3.csv('./datos/locations.csv').then(function(data){ let filtered = [] for(let it

我正在做D3中的热图，我不知道如何在鼠标上方添加文本。我不知道如何进行。如果你能给我一些线索，我将不胜感激。在下面的代码片段中，您可以找到代码。工作和非工作代码块。谢谢


console.log(d3)

let screenWidth = 800
let screenHeight = 400

//load data
d3.csv('./datos/locations.csv').then(function(data){
    let filtered = []
    for(let item of data) {
        if(item.location === "location one") {
            filtered.push(item)
        }
    }

    build(filtered)
})

//Create canvas
function createSVG() {
    let container = d3.select('#container')
    svg = container.append('svg')
    .attr('id', 'canvas')
    .attr('width', screenWidth)
    .attr('height', screenHeight)
}

//Create chart
function build(data) {

    let rectWidth = screenWidth / 24
    let rectHeight = screenHeight / 7

    let rects = svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
        .attr('x', function(d,i) {
            return (parseInt(d.hour) - 1) * rectWidth})
        .attr('y', function(d,i){
            return (parseInt(d.day) - 1) * rectHeight})  
        .attr('height', rectHeight) 
        .attr('width', rectWidth)
        .style('fill', 'black')
        .style('stroke', 'white')
        .on('mouseover', function(d,i) {
            let rects = d3.select(this)
            .append('text')
            .attr('x')
            .attr('y')
            .style('font-weight', 500)
            .style('font-family', 'Arial')
            .style('fill', 'red')
            .text(function (d,i) {return d.value})})
        }

function main() {
    createSVG()
    build()
}

main()
```

节点不能是

s的子节点，就像

s或

s不能一样。它们是图形节点，并不意味着要有子节点。将工具提示附加到SVG或

这意味着您不能再通过

函数（d，i）{return d.value}

访问

d.value

，但您可以获得它，因为您可以从

访问d
。在（'mouseover'，函数（d，i）{

，只需删除

d.value

以外的所有内容即可

如果使用

中的

和

，将会发生的情况是

元素覆盖

，捕捉鼠标事件并立即在

上触发

鼠标出

。因为您可能想要删除

鼠标出

上的工具提示，您将得到文本node闪烁打开和关闭。将文本向右移动至少

rectWidth

，或使用

d3.event

获取事件的鼠标坐标，并使用类似

.attr（'x'，d3.event.clientX+10）的方法将其稍微向下和向右定位

将其向右移动。