使用 D3 JavaScript 向数组中的圆添加工具提示

Question

我正在尝试向圆圈添加工具提示，如 this example. Here is my DEMO 中所示。

我试图用这种方法在工具提示上显示数组值，但工具提示没有出现在图表上：

function plotMeans(){
    var circle = svg.selectAll("circle.means")
            .data(numeric.transpose([x_means, y_means]));

    var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function() {
                    return "<strong>Means:</strong> <span style='color:red'>" + [x_means, y_means] + "</span>";
            });

    svg.call(tip);

    circle.enter().append("circle")
            .attr('class', 'means')
            .attr("r", 10)
            .on("mouseover", tip.show)
            .on("mouseover", tip.hide);

    circle
            .transition().ease("linear").duration(200)
            .attr("cx", function(d, i) { return X(d[0]); })
            .attr("cy", function(d, i){return Y(d[1]);});


    circle.exit().remove();
}

关于如何在具有 [x_means, y_means] 个值的图表上显示工具提示有什么想法吗？

谢谢！

编辑： 我有 this visualisation，我想在红色圆圈上显示工具提示。

function plotMeans(){
    var circle = svg.selectAll("circle.means")
            .data(numeric.transpose([x_means, y_means]));

    console.log(numeric.transpose([x_means, y_means])); //returns 3 pairs of X-Y values

    var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function() {
                for(var i = 0; i < k; i++){
                    return "<strong>Means:</strong> <span style='color:red'>" + JSON.stringify(meansjson) + "</span>";
                }

            });

    svg.call(tip);

    circle.enter().append("circle")
            .attr('class', 'means')
            .attr("r", 10)
            .on("mouseover", tip.show)
            .on("mouseout", tip.hide);

    circle
            .transition().ease("linear").duration(200)
            .attr("cx", function(d, i) { return X(d[0]); })
            .attr("cy", function(d, i){return Y(d[1]);});


    circle.exit().remove();
}

我想用工具提示显示红色圆圈的 X 和 Y 值。 console.log(numeric.transpose([x_means, y_means])); returns 三对 X-Y 值，但我不知道如何在红点上正确显示这些值。

Answer 1

你做的很酷。你犯了一个小错误：

当鼠标在圆上时，你想显示工具提示，当鼠标指针关闭时，你想隐藏它。因此，如果您更改以下行：

        .on("mouseover", tip.show)
        .on("mouseover", tip.hide);

至：

        .on("mouseover", tip.show)
        .on("mouseout", tip.hide);

有效。

__update__

只需添加此功能

function average(dataArray){
  var sum=0;
  for(var i=0; i< dataArray.length; i++){
    sum=sum+dataArray[i];
  }
  return sum/dataArray.length;
}

并按如下方式使用它：

return "<strong>Means:</strong> <span style='color:red'>" + [average(x_means), average(y_means)] + "</span>";

使用 D3 JavaScript 向数组中的圆添加工具提示

Adding tooltips to circles from an array with D3 JavaScript

javascript

d3.js

tooltip