我一直在使用这两个库(它们是相同的，但后者使用d3 v5，并添加了一些实现：https://github.com/syntagmatic/parallel-coordinates和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是画布的上下文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();
};
对于每个有相同问题的人，都有一个链接：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链接中显示的功能，如果你有任何问题，你也可以询问