javascript - 在 d3 可视化上下文中调用工具提示

Question

所以我有一个可视化，我正在尝试使用 d3.tip() - https://github.com/Caged/d3-tip/blob/master/docs/initializing-tooltips.md#d3tip

这是我的代码-

            this.svg = d3.select(".timechart").append("svg")
            .attr("width", this.width + this.margin.left + this.margin.right)
            .attr("height", this.height + this.margin.top + this.margin.bottom)
            .append("g")
            .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");

svg.selectAll('.point')
                .data(newData)
                .enter()
                .append("svg:circle")
                .attr("cx", function(d,i){ 
                    var date = d["date"].match(/(\d+)/g);
                    date = new Date(date[2], date[0], date[1]);
                    return xScale(date);
                })
                .attr("cy", function(d,i){
                    var quantitySold = yScale(d["quantity-sold"]);
                    return quantitySold;
                })
                .attr("fill", "red")
                .attr("r", 4)
                .on("mouseover", function(d){
                    tooltip.show();
                })
                .on("mouseout", function(d){
                    tooltip.hide();
                });


            var tooltip = d3.tip()
                .attr("class", "tooltip")
                .offset([0,5])
                .html(function(d){
                    console.log(d);
                    return "<strong> 20 </strong>";
                });

            svg.call(tooltip);

console.log(d) 给了我未定义的信息，而它应该给我数据。

为什么？

我还意识到 - 我不确定应该在这里发布什么代码来提供帮助 - 只是让我知道什么是有用的。

Answer 1

您正在使用的工具提示库 ( d3.tip ) 为整个可视化创建单个 html 工具提示。使用工具提示的 .show(d,i) 方法将特定元素的数据传递到工具提示。

This example from the plug-in's creator展示了它应该如何工作。特别要注意的是，show 和 hide 方法直接作为参数传递给矩形选择的 .on(event, function) 方法:

svg.selectAll(".bar")
 /* ... */
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide) 

当事件发生时，d3 将调用这些方法并将数据对象作为参数传递给它们。

相反，在您的代码中:

        .on("mouseover", function(d){
            tooltip.show();
        })
        .on("mouseout", function(d){
            tooltip.hide();
        });

d3 会将数据传递给您的匿名函数，但您不会将其传递给显示/隐藏函数。因此，当工具提示的 show 函数尝试设置工具提示的 html 内容时，数据是未定义的。

如果您发现一切仍然令人困惑，您可能会喜欢 this write-up about passing functions as parameters .

最后，虽然这不是您现在的主要问题，但您应该在将工具提示的功能分配给事件处理程序之前定义工具提示。如果您在定义 tooltip 之前尝试执行 .on('mouseover', tooltip.show) 操作，则会收到错误消息。您只能通过将该函数调用包装在另一个函数中来避免它。