将参数传递给函数

时间:2018-04-16 08:39:20

标签: d3.js data-visualization

我有一个svg元素,用户可以单击或双击。 我想调度这两个事件,所以我使用这个方法:

svg.attr('class', 'country')
    .attr('fill', 'steelblue')
    .attr('d', path)
    .on('click', checkIfClickOrDoubleClick);

function checkIfClickOrDoubleClick(d, i) {
    if(dblclick_timer) {
        clearTimeout(dblclick_timer);
        dblclick_timer = false;
        console.log('double click on i =', i, '/ d =', d);
    } 
    else { 
        dblclick_timer = setTimeout(function() {
            dblclick_timer = false;
            console.log('single click on i=', i, '/ d =', d);
            // CREATE OTHER PATH ELEMENT
        }, 250)
    } 
}

问题在于,当用户单击SVG时,代码会创建用户可以单击或双击的其他路径元素。 所以我有类似的东西:

function checkIfClickOrDoubleClick(d, i) {
    if(dblclick_timer) {
        clearTimeout(dblclick_timer);
        dblclick_timer = false;
        console.log('double click on i =', i, '/ d =', d);
    } 
    else { 
        dblclick_timer = setTimeout(function() {
            dblclick_timer = false;
            console.log('single click on i=', i, '/ d =', d);
            // CREATE OTHER PATH ELEMENT
            svg.selectAll(null)
                .data(features)
                .enter().append('path')
                .attr('fill', function(r, i) { 
                    return 'tomato'; // r are the regions, i are the indices of regions
                })
                .attr('d', path)
                .on('click', checkIfClickOrDoubleClick);
        }, 250)
    } 
}

如您所见,我必须检查是否使用了点击或双击。总的来说,我有4种不同的互动。 有没有办法将参数传递给checkIfClickOrDoubleClick()所以我可以区分我在哪种情况下? 否则我想创建另一种方法checkIfClickOrDoubleClick2,但我不认为这是最好的解决方案。

1 个答案:

答案 0 :(得分:1)

您可以在里面使用switch语句创建一个事件处理程序。要查看触发的内容,请检查处理程序中的 event.type (在您的案例事件中为d3.event)。要使元素使用 this event.currentTarget

如果您检测到dblclick并且不想调用click case,请在元素本身上添加一个属性,如this._dblclicked或event.currentTarget._dblclicked,然后在单击情况下,如果您在时间窗口内检测到属性,然后退出。