Question

我试图在工具提示中引用D3中的行引用j。我确信这是可能的。我在onChange事件中分别指j，它工作得很好。但是在工具提示中，它会以未定义的形式返回。谁能告诉我为什么？

var test = svg.selectAll("g#container g.points")
    .data(categs)
.enter().append("g")
    .attr("class", function(d,i) {return "points pt"+i;})
    .style("stroke", function(d,i) {return "#"+z(i);})
    .attr("fill", function(d,i) {return "#"+z(i);})
.selectAll("circle")
    .data(function(d,i,j) {return d.values;})
    .enter().append("circle")
    .attr("cx", function(d,i) {return x(d.date);})
    .attr("cy", function(d,i) {return y(d.y+d.y0);})
    .attr("r", 5);

所以每g.point有一个g＃容器，3 g.points和5个圆圈。 'i'指的是0-4，我希望j指的是0-2 ......工具提示效果很好，弹出并包含i和d（下面的代码中没有显示）但是为j返回'undefined'： / p>

d3.selectAll("g#container g.points").selectAll("circle")
    .call(d3.helper.tooltip()
        .attr({class: "tooltip"})
        .text(function(d, i, j) { return "Category: "+j; })
);

Answer 1

这是一个为期两个月的问题，所以我不确定这是否仍然可以帮助原始海报，但也许它会帮助其他人：

将函数作为参数传递给另一个方法时，为函数指定的参数由该方法的代码确定。（Longer explanation here。）选择中的大多数（尽管不是全部）d3方法将传递数据对象，选择索引和组索引（d，i和{的值。 {1}}在通用术语中）。但是，组索引在示例和用法中并不完善，并且the code for the d3.helper.tooltip module you're using完全不使用它。工具提示功能永远不会访问j，它永远不会将j传递给您提供的函数。

有两种方法可以解决这个问题：

选项1：更改工具提示的代码，以便事件处理函数接受附加元素的第三个参数，并将该参数传递给它们调用的函数：

选项2：如果您不想更改模块脚本，可以通过确保您感兴趣的索引嵌入到元素的数据对象中来解决它：

    /* from https://gist.github.com/biovisualize/2973775 */
    function tooltip(selection){

        selection.on('mouseover.tooltip', function(pD, pI, pJ){
            var name, value;
            // Clean up lost tooltips
            d3.select('body').selectAll('div.tooltip').remove();
            // Append tooltip
            tooltipDiv = d3.select('body').append('div');
            tooltipDiv.attr(attrs);
            tooltipDiv.style(styles);
            var absoluteMousePos = d3.mouse(bodyNode);
            tooltipDiv.style({
                left: (absoluteMousePos[0] + 10)+'px',
                top: (absoluteMousePos[1] - 15)+'px',
                position: 'absolute',
                'z-index': 1001
            });
            // Add text using the accessor function, Crop text arbitrarily
            tooltipDiv.style('width', function(d, i){ 
                     return (text(pD, pI, pJ).length > 80) ? '300px' : null; 
                })
                .html(function(d, i){return text(pD, pI, pJ);});
        })
        .on('mousemove.tooltip', function(pD, pI, pJ){
            // Move tooltip
            var absoluteMousePos = d3.mouse(bodyNode);
            tooltipDiv.style({
                left: (absoluteMousePos[0] + 10)+'px',
                top: (absoluteMousePos[1] - 15)+'px'
            });
            // Keep updating the text, it could change according to position
            tooltipDiv.html(function(d, i){ return text(pD, pI, pJ); });
        })
        .on('mouseout.tooltip', function(pD, pI, pJ){
            // Remove tooltip
            tooltipDiv.remove();
        });

    }

如何在工具提示中访问行参数j

1 个答案: