我正在尝试在this example之后的多行图表上添加工具提示。 当鼠标悬停在其中任何一个上时，我希望工具提示同时显示在两行上，例如example here。在我的实际案例中，我有四行。
这是我的jsbins https://jsbin.com/budonapeki/edit?html,js,console,output 点击右上角的“Run with JS”查看图表。
我的问题是......
在我的jsbins中，工具提示仅显示在该行的第一个点上，而其他工具提示在鼠标移动时不显示。任何人都可以帮忙指出原因吗？
如何在不重复过多代码的情况下同时在线上显示工具提示？由于我使用d3.nest()来转换数组，因此我不确定这是否会影响工具提示的工作。
欣赏！
按照Mark评论中的链接，我最终得到了工具提示。 但我还有其他一些问题......
这是我更新的JSbins https://jsbin.com/hoceneneso/edit?html,js,console,output
第一个问题是..在我的图表中，右侧有两个按钮，单击按钮时线条可能会消失或出现。并且线的相应工具提示应该消失或与线一起出现。但在我的图表中，工具提示仍然存在，即使我单击按钮。
我试图删除并更改工具提示的不透明度，但我仍然无法使其工作。有没有人对此有所了解？
第二个问题是..我试图让工具提示开始显示在“name1”，这是行的起点。我知道灰色矩形是为了捕捉画布上的鼠标移动，所以我试图通过.attr("transform", "translate(180,3)")移动矩形，但是当鼠标悬停在y轴上时工具提示仍会显示。可以解释原因和建议吗？
非常感谢！
答案 0 :(得分：2)
首先问题，为每个“每行鼠标”设置一个唯一ID，以便您可以切换它的不透明度：
$ sudo service hive-server2 stop
在您的图例中点击处理程序：
var mousePerLine = mouseG.selectAll('.mouse-per-line')
.data(dataNest1)
.enter()
.append("g")
.attr("class", "mouse-per-line")
.attr("id", function(d){
return "mouse-per-line-" + d.key;
});
第二个问题，而不是d3.select("#mouse-per-line-" + d.key)
.style("opacity", newOpacity);
移动矩形，设置transform和x属性。您可以通过以下方式使其动态化：
width更新的代码：
mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
.attr('x', x(dataNest1[0].values[0].x))
.attr('width', x(dataNest1[0].values[dataNest1[0].values.length - 1].x) - x(dataNest1[0].values[0].x))
...
var data1 = [
{x: "Name1", y: 2.5, label: "A"},
{x: "Name2", y: 3.5, label: "A"},
{x: "Name3", y: 4.7, label: "A"},
{x: "Name1", y: 4.7, label: "B"},
{x: "Name2", y: 3.5, label: "B"},
{x: "Name3", y: 4.9, label: "B"},
];
var margin = {top: 20, right: 150, bottom: 60, left: 80},
width = 1160 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal().
rangeBands([0, width], 0.4, 0.8);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
var svg = d3.select("#lineChart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(data1.map(function(d) { return d.x; }));
y.domain([0, d3.max(data1, function(d) { return d.y; })]);
svg.append("g").
attr("class", "x axis").
attr("transform", "translate(-70," + height + ")").
call(xAxis);
svg.append("g").
attr("class", "y axis").
call(yAxis);
var dataNest1 = d3.nest()
.key(function(d) {return d.label;})
.entries(data1);
//console.log(dataNest1)
var color = d3.
scale.
ordinal().
range(['red', 'blue']).
domain(d3.keys(data1[0]).
filter(function(key) {return key === 'label';}));
var legendSpace = width/dataNest1.length;
dataNest1.forEach(function(d,i) {
svg.append("path")
.attr("class", "line1")
.style("stroke", function() {
return d.color = color(d.key); })
.attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID **
.attr("d", line(d.values));
svg.append("text")
.attr("x", width - margin.left + 50)
.attr("y", legendSpace/4 + i*(legendSpace/6))
.attr("class", "lineLegend1")
.attr("id", 'tagLegend'+d.key.replace(/\s+/g, '')) // assign ID **
.style("fill", function() {
return d.color = color(d.key); })
.on("click", function(){
console.log(d);
// Determine if current line is visible
var active = d.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements based on the ID
d3.select("#tag"+d.key.replace(/\s+/g, ''))
//.remove();
.transition().duration(500)
.style("opacity", newOpacity);
//d3.selectAll(".mouse-per-line circle")
// .style("opacity", newOpacity);
//d3.selectAll(".mouse-per-line text")
// .style("opacity", newOpacity);
// Update whether or not the elements are active
d.active = active;
d3.select("#mouse-per-line-" + d.key)
.style("opacity", newOpacity);
})
.text(d.key);
});
var mouseG = svg.append("g")
.attr("class", "mouse-over-effects");
mouseG.append("path") // this is the black vertical line to follow mouse
.attr("class", "mouse-line")
.style("stroke", "black")
.style("stroke-width", "1px")
.style("opacity", "0");
var lines = document.getElementsByClassName('line1');
var mousePerLine = mouseG.selectAll('.mouse-per-line')
.data(dataNest1)
.enter()
.append("g")
.attr("class", "mouse-per-line")
.attr("id", function(d){
return "mouse-per-line-" + d.key;
});
mousePerLine.append("circle")
.attr("r", 7)
.style("stroke", function(d) {
return color(d.key);
})
.style("fill", "none")
.style("stroke-width", "1px")
.style("opacity", "0");
mousePerLine.append("text")
.attr("transform", "translate(10,3)");
mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
.attr('x', x(dataNest1[0].values[0].x))
.attr('width', x(dataNest1[0].values[dataNest1[0].values.length - 1].x) - x(dataNest1[0].values[0].x))
.attr('height', height)
.attr('fill', 'grey')
.style('opacity', '0.4')
.attr('pointer-events', 'all')
.on('mouseout', function() { // on mouse out hide line, circles and text
d3.select(".mouse-line")
.style("opacity", "0");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "0");
d3.selectAll(".mouse-per-line text")
.style("opacity", "0");
})
.on('mouseover', function() { // on mouse in show line, circles and text
d3.select(".mouse-line")
.style("opacity", "1");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "1");
d3.selectAll(".mouse-per-line text")
.style("opacity", "1");
})
.on('mousemove', function() { // mouse moving over canvas
var mouse = d3.mouse(this);
d3.select(".mouse-line")
.attr("d", function() {
var d = "M" + mouse[0] + "," + height;
d += " " + mouse[0] + "," + 0;
return d;
});
d3.selectAll(".mouse-per-line")
.attr("transform", function(d, i) {
//console.log(width/mouse[0])
var xQuater = y.invert(d3.mouse(this)[0]),
bisect = d3.bisector(function(d) { return d.x; }).right;
idx = bisect(d.values, xQuater);
var beginning = 0,
end = lines[i].getTotalLength(),
target = null;
while (true){
target = Math.floor((beginning + end) / 2);
pos = lines[i].getPointAtLength(target);
if ((target === end || target === beginning) && pos.x !== mouse[0]) {
break;
}
if (pos.x > mouse[0]) end = target;
else if (pos.x < mouse[0]) beginning = target;
else break; //position found
}
d3.select(this).select('text')
.text(y.invert(pos.y).toFixed(2));
return "translate(" + mouse[0] + "," + pos.y +")";
});
});