Question

我一直使用这两个库（它们相同，但后者使用d3 v5并添加了一些实现：https://github.com/syntagmatic/parallel-coordinates和https://github.com/BigFatDog/parcoords-es/blob/master/demo/nutrients.html）用于parcoords，但是在最近的三天内，还没有找到一种在曲线上方显示工具提示的方法。我想使用鼠标悬停显示对象的名称，但是我不知道如何访问这些行。我一直在尝试调用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是画布的上下文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

对于每个有相同问题的人，都有一个链接：http://bl.ocks.org/mostaphaRoudsari/b4e090bb50146d88aec4，可以在很多方面帮助您。

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

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.ock链接中显示的功能。

带有工具提示的平行坐标

1 个答案: