Ich habe eine Multi-Serie Liniendiagramm mit this bl.ocks.org code example erstellt. Ich habe es geschafft, es auf JSFiddle neu zu erstellen. JetztMultiseries Liniendiagramm mit Mouseover Tooltip
, ich versuche, einen x-Wert Mouseover Tooltip hinzuzufügen, die in jeder Zeile die ein Tooltip angezeigt, wenn Sie seine vertikale Position schweben. So etwas wie this, aber für mehrere Zeilen.
Ich fand this StackOverflow answer (es enthält eine JSFiddle), aber ich kann nicht scheinen, damit es mit meiner Multiserien Liniendiagramm funktioniert.
svg.append("path") // this is the black vertical line to follow mouse
.attr("class","mouseLine")
.style("stroke","black")
.style("stroke-width", "1px")
.style("opacity", "0");
var mouseCircle = causation.append("g") // for each line, add group to hold text and circle
.attr("class","mouseCircle");
mouseCircle.append("circle") // add a circle to follow along path
.attr("r", 7)
.style("stroke", function(d) { console.log(d); return color(d.key); })
.style("fill","none")
.style("stroke-width", "1px");
mouseCircle.append("text")
.attr("transform", "translate(10,3)"); // text to hold coordinates
var bisect = d3.bisector(function(d) { return d.YEAR; }).right; // reusable bisect to find points before/after line
svg.append('svg:rect') // append a rect to catch mouse movements on canvas
.attr('width', width) // can't catch mouse events on a g element
.attr('height', height)
.attr('fill', 'none')
.attr('pointer-events', 'all')
.on('mouseout', function(){ // on mouse out hide line, circles and text
d3.select(".mouseLine")
.style("opacity", "0");
d3.selectAll(".mouseCircle circle")
.style("opacity", "0");
d3.selectAll(".mouseCircle text")
.style("opacity", "0");
})
.on('mouseover', function(){ // on mouse in show line, circles and text
d3.select(".mouseLine")
.style("opacity", "1");
d3.selectAll(".mouseCircle circle")
.style("opacity", "1");
d3.selectAll(".mouseCircle text")
.style("opacity", "1");
})
.on('mousemove', function() { // mouse moving over canvas
d3.select(".mouseLine")
.attr("d", function(){
yRange = y.range(); // range of y axis
var xCoor = d3.mouse(this)[0]; // mouse position in x
var xDate = x.invert(xCoor); // date corresponding to mouse x
d3.selectAll('.mouseCircle') // for each circle group
.each(function(d,i){
var rightIdx = bisect(data[1].values, xDate); // find date in data that right off mouse
var interSect = get_line_intersection(xCoor, // get the intersection of our vertical line and the data line
yRange[0],
xCoor,
yRange[1],
x(data[i].values[rightIdx-1].YEAR),
y(data[i].values[rightIdx-1].VALUE),
x(data[i].values[rightIdx].YEAR),
y(data[i].values[rightIdx].VALUE));
d3.select(this) // move the circle to intersection
.attr('transform', 'translate(' + interSect.x + ',' + interSect.y + ')');
d3.select(this.children[1]) // write coordinates out
.text(xDate.toLocaleDateString() + "," + y.invert(interSect.y).toFixed(0));
});
return "M"+ xCoor +"," + yRange[0] + "L" + xCoor + "," + yRange[1]; // position vertical line
});
});
// from here: https://stackoverflow.com/a/1968345/16363
function get_line_intersection(p0_x, p0_y, p1_x, p1_y,
p2_x, p2_y, p3_x, p3_y)
{
var rV = {};
var s1_x, s1_y, s2_x, s2_y;
s1_x = p1_x - p0_x; s1_y = p1_y - p0_y;
s2_x = p3_x - p2_x; s2_y = p3_y - p2_y;
var s, t;
s = (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y))/(-s2_x * s1_y + s1_x * s2_y);
t = (s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x))/(-s2_x * s1_y + s1_x * s2_y);
if (s >= 0 && s <= 1 && t >= 0 && t <= 1)
{
// Collision detected
rV.x = p0_x + (t * s1_x);
rV.y = p0_y + (t * s1_y);
}
return rV;
}
Also, um es einfach auszudrücken, ich möchte meine line chart JSFiddle mit diesem tooltip JSFiddle kombinieren. Weiß jemand, wie man das macht? Oder gibt es eine einfachere Möglichkeit, einen Tooltip wie diesen zu erstellen? Jede Hilfe wird geschätzt!
Siehe http://bl.ocks.org/Matthew-Weber/ 5645518 –