带工具提示的平行坐标

Question

我一直在使用这两个库（它们是相同的，但后者使用 d3 v5 并添加了一些实现：https://github.com/syntagmatic/parallel-coordinates and https://github.com/BigFatDog/parcoords-es/blob/master/demo/nutrients.html）用于 parcoords 但在过去的 3 天里我还没有找到方法在曲线上方显示工具提示。我想用鼠标悬停显示对象的名称，但我不知道如何访问这些行。我一直在尝试调用 svg 或 canvas（我认为线条画在那里）给它们一个 .on 并在鼠标悬停访问提供给 parcoord 的数据时创建一个小标签，但这并不像我刚刚描述。这是我的代码的示例（它来自库的演示，但我的代码看起来很相似，只是稍微重一点）：

<!doctype html>
<title>Linking to Data Table</title>
<link rel="stylesheet" type="text/css" href="./parcoords.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
    body, html { margin: 0; padding: 0; width: 100%; height: 100%; }
    /* parcoords */
    #nutrients { height: 600px; width: 98%; }
    #nutrients text { font-size: 10px; }
</style>
<script src="lib/d3.v5.min.js"></script>
<script src="./parcoords.standalone.js"></script>
<script src="lib/underscore.js"></script>
<div id="nutrients" class="parcoords"></div>
<script id="brushing">
    var parcoords = ParCoords()("#nutrients");
    d3.csv('data/nutrients.csv').then(function(data) {
        var colorList = ['#3b73b9', '#aa71aa', '#ee3224', '#00aeef', '#f8981d',
            '#80bb42', '#aacdef', '#cacec2', '#aaa6ce', '#df9e9d', '#6ab2e7',
            '#ffdd00', '#9ac2b9', '#a7a9ac', '#bbbb42', '#e6a6ce'];
        var groups = _(data).chain()
            .pluck('group')
            .uniq();
        var colorScale = d3.scaleOrdinal().domain(groups).range(colorList);
        var color = function(d) { return colorScale(d.group); };
        parcoords
            .data(data)
            .color(color)
            .hideAxis(['name'])
            .margin({ top: 24, left: 60, bottom: 12, right: 0 })
            .mode("queue")
            .alpha(0.7)
            .render()
            .brushMode("1D-axes");  // enable brushing
    });
</script>

在这个例子中，当鼠标悬停在相应的行上时，它会显示名称，例如 cheese。我想要它，因为我有很多行，如果我为此使用一个轴，名称会相互重叠，用户将无法看到它们（以防您对如何做到这一点有其他想法）

如果有人能让我摆脱这种痛苦，我将非常感激。谢谢！

编辑，我认为线条是在这里创建的，ctx 是 canvas:

的上下文 2d

  var singlePath = function singlePath(config, position, d, ctx) {
    Object.keys(config.dimensions).map(function (p) {
      return [position(p), d[p] === undefined ? getNullPosition(config) : config.dimensions[p].yscale(d[p])];
    }).sort(function (a, b) {
      return a[0] - b[0];
    }).forEach(function (p, i) {
      i === 0 ? ctx.moveTo(p[0], p[1]) : ctx.lineTo(p[0], p[1]);
    });
  };

  // draw single polyline
  var colorPath = function colorPath(config, position, d, ctx) {
    ctx.beginPath();
    if (config.bundleDimension !== null && config.bundlingStrength > 0 || config.smoothness > 0) {
      singleCurve(config, position, d, ctx);
    } else {
      singlePath(config, position, d, ctx);
    }
    ctx.stroke();
  };

Answer 1

对于遇到相同问题的每个人，link：http://bl.ocks.org/mostaphaRoudsari/b4e090bb50146d88aec4 在这方面有很大帮助。

如果您使用与我相同的库 d3.js v5（我的问题中的后一个库 link），只需将其添加到平行坐标库（或独立库）中：

function compute_centroids(config, position) {
        return function (row) {
            var centroids = [];
            var p = Object.keys(config.dimensions);
            var cols = p.length;
            var a = 0.5; // center between axes
            for (var i = 0; i < cols; ++i) {
                // centroids on 'real' axes
                var x = position(p[i]);
                var y = config.dimensions[p[i]].yscale(row[p[i]]);
                centroids.push(([x, y]));

                // centroids on 'virtual' axes
                if (i < cols - 1) {
                    var cx = x + a * (position(p[i + 1]) - x);
                    var cy = y + a * (config.dimensions[p[i + 1]].yscale(row[p[i + 1]]) - y);
                    if (config.bundleDimension !== null) {
                        var leftCentroid = config.clusterCentroids.get(config.dimensions[config.bundleDimension].yscale(row[config.bundleDimension])).get(p[i]);
                        var rightCentroid = config.clusterCentroids.get(config.dimensions[config.bundleDimension].yscale(row[config.bundleDimension])).get(p[i + 1]);
                        var centroid = 0.5 * (leftCentroid + rightCentroid);
                        cy = centroid + (1 - config.bundlingStrength) * (cy - centroid);
                    }
                    centroids.push(([cx, cy]));
                }
            }

        return centroids;}
};

在构造函数的末尾添加这一行：

pc.compute_centroids = compute_centroids(config,position);

那么这个bl.ocklink中显示的功能你应该可以很容易的使用，有什么问题也可以问

带工具提示的平行坐标

Parallel-Coordinates with tooltip

javascript

tooltip

d3.js

parallel-coordinates