时间戳

首页 > 解决方案 > D3JS 如何将数据发送到事件中

javascript - D3JS 如何将数据发送到事件中

问题描述

我对在 D3JS 中发送数据的理解不清楚，希望有人能向我解释一下。首先，我将展示我的代码，然后我将向您展示我的问题。

d3.dsv(';','files/d3.csv').then(function(data){
var s_w = 600;
var s_h = 500;
var svg2 = d3.select('.font_tem_export_content_3')
        .append('svg')
        .attr('width',s_w)
        .attr('height',s_h);
    ///bars
    var gg2 = svg2.append('g')
                .attr('transform','translate(60,'+30+')')
        gg2.selectAll('.d3_bars')
            .data(data)
            .enter()
            .append('rect')
            .attr('x',function(d){
              return x_scale3(d.year);
            })
            .attr('y',function(d){
              return y_scale3(d.value);
            })
            .attr('width', x_scale3.bandwidth())
            .on('mouseover',onMouseOver);
});
    function onMouseOver(d,i){
        console.log(d);
    }

然后，当我将鼠标移入那些“rect”元素时，我得到了结果：

{stt：“9”，姓名：“I”，年龄：“18”，性别：“nữ”，年份：“2018”，...}

就个人而言，我不知道为什么函数onMouseOver在外面d3.dsv(';','files/d3.csv').then(function(data){}，他们仍然可以获得它们的价值（var din function）。此外，它们是如何存储在客户端屏幕中的？（我没有在 html 代码中看到任何数据）。有人介意帮助我吗。

标签： javascriptd3.jsdom-events

解决方案

  • d3.selection.on(type[, listener[, capture]]) 为当前选择中的每个元素添加一个事件监听器
  • D3 调用侦听器的方式与调用其他 D3 运算符函数的方式相同——通过将当前数据“d”、索引“i”和“this”上下文作为当前 DOM 元素传递
  • 注意 D3 允许您利用捕获阶段与冒泡阶段事件触发器
  • d3.event 在事件发生时捕获事件并将其存储在变量 d3.event 中
  • d3.event 变量是一个全局变量，可以在使用 d3.selection.on 操作符注册的事件监听回调函数中使用
  • JavaScript 回调函数完成运行后，当前的 d3.event 变量被重置
  • 您可以通过将 JavaScript 空对象作为 eventListener 类型的函数传递来“删除”事件侦听器

推荐阅读