Reputation: 5813
In my D3 chart, I have Implemented Zoom in and Zoom out functionality after adding this I am facing some issue with tooltip, It is not showing data on hover for that dot/circle as expected. (I feel after adding zoom in zoom out newX and newY is not updated properly)
Working code for tooltip without zoom in zoom out here
After adding the zoom in zoom out code here
.on("mousemove", function() {
var mouse = d3.mouse(this);
var mouseDate = xScale.invert(mouse[0]);
var i = bisectDate(data, mouseDate); // returns the index to the current data item
var d0 = data[i - 1];
var d1 = data[i];
let d;
// work out which date value is closest to the mouse
if (typeof d1 !== "undefined") {
d = mouseDate - d0.startTime > d1.startTime - mouseDate ? d1 : d0;
} else {
d = d0;
}
div
.html(
`<span>${parseDate(d.startTime)}</span>
<span>Magnitude: ${d.magnitude} </span>`
)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px");
var x = xScale(d.startTime);
var y = yScale(d.magnitude);
focus
.select("#focusCircle")
.attr("cx", x)
.attr("cy", y);
focus
.select("#focusLineX")
.attr("x1", x)
.attr("y1", yScale(yDomain[0]))
.attr("x2", x)
.attr("y2", yScale(yDomain[1]));
focus
.select("#focusLineY")
.attr("x1", xScale(xDomain[0]))
.attr("y1", y)
.attr("x2", xScale(xDomain[1]))
.attr("y2", y);
});
I am not able to differentiate why there's an issue. Please help me.
Upvotes: 0
Views: 1974
Reputation: 958
I'm curious of your code i never see the tip function build like this, wrong but its works
See the one without zoom build,
if you change
g.selectAll("dot")
.data(data)
.enter()
.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function(d) {....
to
svg
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function(d) {....
it will produce the same issue
You make a wasting element, see the one without zoom build
g.selectAll("dot")
.data(data)
.enter()
.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function(d) {....
you should not do that, why you selectAll ("dot")
and append ('rect')
, please read more d3.js
documentation and why you do this anyway, you build all rectangle element each one of data for overlay and stay hidden? for what? you even not using the data that append to it, why not just make it one rect element
g.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function(d) {....
.on("mousemove", function(d) {....
now back to the one who has a zoom on it, when your mouse pointing to that svg which element your pointer point to? to the bottom of svg layer or the first one? pointer not pointing to that element and you put an event such as mousemove, your mouse pointer never touch that element, it will not works,i believe you know why, that is why this code put mouse event and zoom function to the svg, but it produces some issue you face it now, just make a little adjustment to that two code and all will be done
var data = [
{
startTime: "1567765320049",
magnitude: 0,
startupMagnitude: 0,
startupRunningStatus: "IN_SYNC"
},
{
startTime: "1567851720049",
magnitude: 0,
startupMagnitude: 0,
startupRunningStatus: "IN_SYNC"
},
{
startTime: "1568024520049",
magnitude: 10,
startupMagnitude: 10,
startupRunningStatus: "IN_SYNC"
},
{
startTime: "1568283720049",
magnitude: 10,
startupMagnitude: 0,
startupRunningStatus: "OUT_OF_SYNC"
},
{
startTime: "1568629320049",
magnitude: 0,
startupMagnitude: 10,
startupRunningStatus: "OUT_OF_SYNC"
},
{
startTime: "1569061320049",
magnitude: 0,
startupMagnitude: 0,
startupRunningStatus: "IN_SYNC"
},
{
startTime: "1569579720049",
magnitude: -20,
startupMagnitude: 0,
startupRunningStatus: "OUT_OF_SYNC"
},
{
startTime: "1570184520049",
magnitude: -20,
startupMagnitude: -10,
startupRunningStatus: "OUT_OF_SYNC"
},
{
startTime: "1570875720049",
magnitude: 0,
startupMagnitude: 0,
startupRunningStatus: "IN_SYNC"
},
{
startTime: "1571653320049",
magnitude: 10,
startupMagnitude: -0,
startupRunningStatus: "OUT_OF_SYNC"
},
{
startTime: "1572517320049",
magnitude: 0,
startupMagnitude: -10,
startupRunningStatus: "OUT_OF_SYNC"
},
{
startTime: "1573467720049",
magnitude: 0,
startupMagnitude: -10,
startupRunningStatus: "OUT_OF_SYNC"
},
{
startTime: "1574504520049",
magnitude: 10,
startupMagnitude: -10,
startupRunningStatus: "OUT_OF_SYNC"
},
{
startTime: "1575627720049",
magnitude: 10,
startupMagnitude: -10,
startupRunningStatus: "OUT_OF_SYNC"
}
];
var drawLineGraph = function(containerHeight, containerWidth, data, yLabel, warnLine) {
// A function that updates the chart when the user zoom and thus new boundaries are available
var newX = ''
const updateChart = () => {
d3.select("#focusCircle").style('display', 'none')
// recover the new scale
newX = d3.event.transform.rescaleX(xScale);
var newY = yScale;
// update axes with these new boundaries
d3.select("#axisX").call(d3.axisBottom(newX));
//d3.select('#axisY').call(d3.axisLeft(newY));
// update circle position
scatter
.selectAll("circle")
.attr("cx", function(d) {
if (d) {
return newX(d.startTime);
}
})
.attr("cy", function(d) {
if (d) {
return newY(d.magnitude);
}
});
var line2 = d3
.line()
.x(function(d) {
return newX(d.startTime);
})
.y(function(d) {
return newY(d.startupMagnitude);
});
var area = d3
.area()
.x(function(d) {
return newX(d.startTime);
})
.y0(function(d) {
return yScale(d.startupMagnitude);
})
.y1(height);
var line = d3
.line()
.x(function(d) {
return newX(d.startTime);
})
.y(function(d) {
return newY(d.magnitude);
});
g.select('#firstLayer').on("mousemove", function() {
d3.select("#focusCircle").style('display', 'block')
focus.style('display', 'none')
var mouse = d3.mouse(this);
var mouseDate = newX.invert(mouse[0]);
var i = bisectDate(data, mouseDate); // returns the index to the current data item
var d0 = data[i - 1];
var d1 = data[i];
let d;
// work out which date value is closest to the mouse
if ( typeof d1 !== "undefined" && typeof d0 !== "undefined"){
focus.style('display', 'block')
div.style('display', 'block')
if (typeof d1 !== "undefined" ) {
d = mouseDate - d0.startTime > d1.startTime - mouseDate ? d1 : d0;
} else {
d = d0;
}
div
.html(
`<span>${parseDate(d.startTime)}</span>
<span>Magnitude: ${d.magnitude} </span>`
)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px");
var x = newX(d.startTime);
var y = yScale(d.magnitude);
focus
.select("#focusCircle")
.attr("cx", x)
.attr("cy", y);
focus
.select("#focusLineX")
.attr("x1", x)
.attr("y1", yScale(yDomain[0]))
.attr("x2", x)
.attr("y2", yScale(yDomain[1]));
focus
.select("#focusLineY")
.attr("x1", xScale(xDomain[0]))
.attr("y1", y)
.attr("x2", xScale(xDomain[1]))
.attr("y2", y);
} else {
d3.select("#focusCircle").style('display', 'none')
focus.style('display', 'none')
div.style('display', 'none')
}
});
scatter.select("#line2").attr("d", line2);
scatter.select(".line").attr("d", line);
scatter.select("#area").attr("d", area);
};
var zoom = d3
.zoom()
.scaleExtent([0.5, 20]) // This control how much you can unzoom (x0.5) and zoom (x20)
.extent([[0, 0], [containerWidth, containerHeight]])
.on("zoom", updateChart);
var svg = d3
.select('#chart')
.append("svg")
.attr("width", containerWidth)
.attr("height", containerHeight);
var clip = svg
.append("defs")
.append("SVG:clipPath")
.attr("id", "clip")
.append("SVG:rect")
.attr("width", containerWidth)
.attr("height", containerHeight)
.attr("x", 50)
.attr("y", 0);
// Create the scatter variable: where both the circles and the brush take place
var scatter = svg.append("g").attr("clip-path", "url(#clip)");
var margin = { top: 50, left: 50, right: 50, bottom: 80 };
var height = containerHeight - margin.top - margin.bottom;
var width = containerWidth - margin.left - margin.right;
var xDomain = d3.extent(data, function(d) {
return d.startTime;
});
var yDomain = d3.extent(data, function(d) {
return d.magnitude;
});
var xScale = d3
.scaleTime()
.range([0, width])
.domain(xDomain);
var yScale = d3
.scaleLinear()
.range([height, 0])
.domain(yDomain);
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);
var line = d3
.line()
.x(function(d) {
return xScale(d.startTime);
})
.y(function(d) {
return yScale(d.magnitude);
});
var line2 = d3
.line()
.x(function(d) {
return xScale(d.startTime);
})
.y(function(d) {
return yScale(d.startupMagnitude);
});
var area = d3
.area()
.x(function(d) {
return xScale(d.startTime);
})
// .x0(function(d) {
// return xScale(d.startTime);
// })
// .x1(function(d) {
// return xScale(d.magnitude);
// })
.y0(function(d) {
return yScale(d.startupMagnitude);
})
.y1(height);
// .y0(height)
// .y1(function(d) { return yScale(d.magnitude); });
// var area = d3
// .area()
// .x0(function(d) {
// return xScale(d.startTime);
// })
// .x1(function(d) {
// return xScale(d.startTime);
// })
// .y0(function(d) {
// return yScale(d.magnitude);
// })
// .y1(function(d) {
// return yScale(0);
// });
// var area = d3
// .area()
// .x(function(d) {
// return xScale(d.startTime);
// })
// .y0(function(d) {
// return yScale(d.magnitude);
// })
// .y1(yScale(0));
// Define the div for the tooltip
var div = d3
.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var g = scatter
.append("g")
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
var g2 = svg
.append("g")
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
g.append("path")
.datum(data)
.attr("class", "area")
.attr("id", "area")
.attr("d", area);
g.append("g")
.attr("class", "x axis")
.attr("id", "axisX")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis);
g2.append("g")
.attr("class", "y axis")
.attr("id", "axisY")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.attr("text-anchor", "end")
.text(yLabel);
g.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
g.append("path")
.datum(data)
.attr("class", "line2")
.attr("id", "line2")
.attr("d", line2);
g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d.startTime);
})
.attr("cy", function(d) {
return yScale(d.magnitude);
})
.attr("r", function(d) {
if (d.startupRunningStatus === "OUT_OF_SYNC") {
return 5;
}
})
.attr("class", "circle");
//legend code
svg
.append("circle")
.attr("cx", 40)
.attr("cy", 380)
.attr("r", 6)
.style("fill", "#1391d8");
svg
.append("circle")
.attr("cx", 40)
.attr("cy", 400)
.attr("r", 6)
.style("fill", "red");
svg
.append("text")
.attr("x", 60)
.attr("y", 380)
.text("Startup Config")
.style("font-size", "15px")
.attr("alignment-baseline", "middle");
svg
.append("text")
.attr("x", 60)
.attr("y", 400)
.text("Running Config")
.style("font-size", "15px")
.attr("alignment-baseline", "middle");
// focus tracking
var focus = g.append("g").style("display", "none");
focus
.append("line")
.attr("id", "focusLineX")
.attr("class", "focusLine");
focus
.append("line")
.attr("id", "focusLineY")
.attr("class", "focusLine");
focus
.append("circle")
.attr("id", "focusCircle")
.attr("r", 5)
.attr("class", "circle focusCircle");
//grid line
const make_x_axis = () => {
return d3.axisBottom(xScale);
};
scatter
.append("g")
.attr("class", "grid")
.attr("transform", "translate(50," + (height + 50) + ")")
.call(
make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
);
var bisectDate = d3.bisector(function(d) {
return d.startTime;
}).left;
var parseDate = d3.timeFormat("%Y-%m-%d %H:%M:%S");
g
.append("rect")
.attr("class", "overlay")
.attr("id","firstLayer")
.attr("width", width)
.attr("height", height)
.on("mouseover", function(d) {
console.log('ok')
focus.style("display", null);
div
.transition()
.duration(200)
.style("opacity", 0.9);
})
.on("mouseout", function() {
focus.style("display", "none");
div
.transition()
.duration(300)
.style("opacity", 0);
})
.on("mousemove", function() {
var mouse = d3.mouse(this);
var mouseDate = xScale.invert(mouse[0]);
var i = bisectDate(data, mouseDate); // returns the index to the current data item
var d0 = data[i - 1];
var d1 = data[i];
let d;
// work out which date value is closest to the mouse
if (typeof d1 !== "undefined") {
d = mouseDate - d0.startTime > d1.startTime - mouseDate ? d1 : d0;
} else {
d = d0;
}
div
.html(
`<span>${parseDate(d.startTime)}</span>
<span>Magnitude: ${d.magnitude} </span>`
)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px");
var x = xScale(d.startTime);
var y = yScale(d.magnitude);
focus
.select("#focusCircle")
.attr("cx", x)
.attr("cy", y);
focus
.select("#focusLineX")
.attr("x1", x)
.attr("y1", yScale(yDomain[0]))
.attr("x2", x)
.attr("y2", yScale(yDomain[1]));
focus
.select("#focusLineY")
.attr("x1", xScale(xDomain[0]))
.attr("y1", y)
.attr("x2", xScale(xDomain[1]))
.attr("y2", y);
})
.call(zoom);
// warn line
// if (
// warnLine &&
// yDomain[0] < warnLine.lineValue &&
// yDomain[1] > warnLine.lineValue
// ) {
// g.append("line")
// .attr("x1", xScale(xDomain[0]))
// .attr("y1", yScale(warnLine.lineValue))
// .attr("x2", xScale(xDomain[1]))
// .attr("y2", yScale(warnLine.lineValue))
// .attr("class", "zeroline");
// g.append("text")
// .attr("x", xScale(xDomain[1]))
// .attr("y", yScale(warnLine.lineValue))
// .attr("dy", "1em")
// .attr("text-anchor", "end")
// .text(warnLine.label)
// .attr("class", "zerolinetext");
// }
}
drawLineGraph(410, 700, data, "Magnitude", {
lineValue: 0,
label: "Startup Config!"
});
.axis path,
.axis line {
fill: none;
stroke: #e0e0e0;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: red;
stroke-width: 2px;
}
.line2 {
fill: none;
stroke: #2e59cf;
stroke-width: 0.3px;
}
.circle {
/* fill: white;
stroke: steelblue;
stroke-width: 2px; */
fill: steelblue;
stroke: steelblue;
/* stroke-width: 2px; */
}
.area {
fill: #2e59cf;
stroke: none;
opacity: 0.1;
}
.zeroline {
fill: none;
stroke: #1391d8;
stroke-width: 1px;
stroke-dasharray: 8 8;
}
.zerolinetext {
fill: #1391d8;
}
.overlay {
fill: none;
stroke: none;
pointer-events: all;
}
.focusLine {
fill: none;
stroke: steelblue;
stroke-width: 0.5px;
}
.focusCircle {
fill: red;
}
div.tooltip {
position: absolute;
text-align: center;
width: 150px;
height: 38px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
.grid .tick {
stroke: lightgrey;
stroke-width: 0.7px;
stroke-dasharray: 8 8;
opacity: 0.3;
}
.grid path {
stroke-width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div className="App">
<h1>Chart</h1>
</div>
<div id="chart"></div>
Upvotes: 1