我一直在使用这两个库（它们是相同的，但后者使用 d3 v5 并添加了一些实现：https ://github.com/syntagmatic/parallel-coordinates和https://github.com/BigFatDog/ parcoords-es/blob/master/demo/nutrients.html) 对于 parcoords，但在过去的 3 天里，我还没有找到一种在曲线上显示工具提示的方法。我想用鼠标悬停显示对象的名称，但我不知道如何访问这些行。我一直在尝试调用 svg 或画布（我认为线条是在那里绘制的）给它们一个 .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>
在此示例中，它的名称将是例如奶酪，当鼠标悬停在相应的行上时会出现。我想要它，因为我有很多线条，如果我为此使用轴，名称将相互重叠，用户将无法看到它们（以防您对如何做到这一点有其他想法）
如果有人能让我摆脱这种痛苦，我将非常感激。谢谢！
编辑，我认为这些线条是在这里创建的，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();
};