fixed tooltip
This commit is contained in:
parent
963dd97e3c
commit
b9e7b5a81b
153
web/app.html
153
web/app.html
@ -8,23 +8,21 @@
|
|||||||
<div id="graphs"></div>
|
<div id="graphs"></div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// set the dimensions and margins of the graph
|
// set the margins of the graph
|
||||||
const margin = {
|
const margin = {
|
||||||
top: 10,
|
top: 10,
|
||||||
right: 30,
|
right: 30,
|
||||||
bottom: 30,
|
bottom: 30,
|
||||||
left: 60
|
left: 30
|
||||||
},
|
};
|
||||||
width = 1600 - margin.left - margin.right,
|
// get window size
|
||||||
height = 400 - margin.top - margin.bottom;
|
const width = window.innerWidth - margin.right - margin.left -10;
|
||||||
|
// set fixed graph height
|
||||||
|
const height = 400;
|
||||||
|
|
||||||
// append the svg object to the body of the page
|
// reload page when window is resized
|
||||||
const svg = d3.select("#my_dataviz")
|
// (resizes every elements)
|
||||||
.append("svg")
|
window.onresize = function(){ location.reload(); }
|
||||||
.attr("width", width + margin.left + margin.right)
|
|
||||||
.attr("height", height + margin.top + margin.bottom)
|
|
||||||
.append("g")
|
|
||||||
.attr("transform", `translate(${margin.left},${margin.top})`);
|
|
||||||
|
|
||||||
d3.csv('http://127.0.0.1/output.csv', d => {
|
d3.csv('http://127.0.0.1/output.csv', d => {
|
||||||
return {
|
return {
|
||||||
@ -46,12 +44,14 @@ d3.csv('http://127.0.0.1/output.csv', d => {
|
|||||||
.data(nestedData.keys())
|
.data(nestedData.keys())
|
||||||
.enter().append("div")
|
.enter().append("div")
|
||||||
.attr("class", "graph-container");
|
.attr("class", "graph-container");
|
||||||
|
// console.log(graphDivs);
|
||||||
|
|
||||||
// Append SVG elements to each div
|
// Append SVG elements to each div
|
||||||
const svgs = graphDivs.append("svg")
|
const svgs = graphDivs.append("svg")
|
||||||
.attr("width", width + margin.left + margin.right)
|
.attr("width", width + margin.left + margin.right)
|
||||||
.attr("height", height + margin.top + margin.bottom)
|
.attr("height", height + margin.top + margin.bottom)
|
||||||
.append("g")
|
.append("g")
|
||||||
|
.attr('viewBox', `0 0 ${width} ${height}`)
|
||||||
.attr("transform", `translate(${margin.left},${margin.top})`);
|
.attr("transform", `translate(${margin.left},${margin.top})`);
|
||||||
|
|
||||||
var dict_xAxis = {};
|
var dict_xAxis = {};
|
||||||
@ -91,21 +91,23 @@ d3.csv('http://127.0.0.1/output.csv', d => {
|
|||||||
.attr("class", "myCircle")
|
.attr("class", "myCircle")
|
||||||
.attr("cx", d => x(d.date))
|
.attr("cx", d => x(d.date))
|
||||||
.attr("cy", d => y(d.value))
|
.attr("cy", d => y(d.value))
|
||||||
.attr("r", 8)
|
.attr("r", 5)
|
||||||
.attr("stroke", "#69b3a2")
|
.attr("stroke", "#69b3a2")
|
||||||
.attr("stroke-width", 3)
|
.attr("stroke-width", 3)
|
||||||
.attr("fill", "white");
|
.attr("fill", "white");
|
||||||
|
|
||||||
// interaction
|
// interaction
|
||||||
// Create a tooltip for each graph
|
// Create a tooltip for each graph
|
||||||
const Tooltip = d3.select("body").append("div")
|
console.log(d3.select(this.parentNode.parentNode));
|
||||||
|
const Tooltip = d3.select(this.parentNode.parentNode).append("div")
|
||||||
.style("opacity", 0)
|
.style("opacity", 0)
|
||||||
.attr("class", "tooltip")
|
.attr("class", "tooltip")
|
||||||
.style("background-color", "white")
|
.style("background-color", "white")
|
||||||
.style("border", "solid")
|
.style("border", "solid")
|
||||||
.style("border-width", "2px")
|
.style("border-width", "2px")
|
||||||
.style("border-radius", "5px")
|
.style("border-radius", "5px")
|
||||||
.style("padding", "5px");
|
.style("padding", "5px")
|
||||||
|
.style("position", "absolute");
|
||||||
|
|
||||||
// Interaction functions for each graph
|
// Interaction functions for each graph
|
||||||
const mouseover = function(event, d) {
|
const mouseover = function(event, d) {
|
||||||
@ -113,10 +115,11 @@ d3.csv('http://127.0.0.1/output.csv', d => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const mousemove = function(event, d) {
|
const mousemove = function(event, d) {
|
||||||
|
console.log(event.pageX + 10);
|
||||||
Tooltip
|
Tooltip
|
||||||
.html("Exact value: " + d.value)
|
.html("Exact value: " + d.value)
|
||||||
.style("left", `${event.pageX + 10}px`)
|
.style("left", (event.pageX + 10) + "px")
|
||||||
.style("top", `${event.pageY}px`);
|
.style("top", (event.pageY + 10) + "px")
|
||||||
};
|
};
|
||||||
|
|
||||||
const mouseleave = function(event, d) {
|
const mouseleave = function(event, d) {
|
||||||
@ -138,122 +141,6 @@ d3.csv('http://127.0.0.1/output.csv', d => {
|
|||||||
.on("mouseover", mouseover)
|
.on("mouseover", mouseover)
|
||||||
.on("mousemove", mousemove)
|
.on("mousemove", mousemove)
|
||||||
.on("mouseleave", mouseleave);
|
.on("mouseleave", mouseleave);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// // zoom
|
|
||||||
// // Add a clipPath for each graph
|
|
||||||
// var clip = svg.append("defs").append("svg:clipPath")
|
|
||||||
// .attr("id", "clip-" + key)
|
|
||||||
// .append("svg:rect")
|
|
||||||
// .attr("width", width)
|
|
||||||
// .attr("height", height)
|
|
||||||
// .attr("x", 0)
|
|
||||||
// .attr("y", 0);
|
|
||||||
//
|
|
||||||
// // Create zoom behavior for each graph
|
|
||||||
// var zoom = d3.zoom()
|
|
||||||
// .scaleExtent([1, Infinity])
|
|
||||||
// .translateExtent([
|
|
||||||
// [0, 0],
|
|
||||||
// [width, height]
|
|
||||||
// ])
|
|
||||||
// .extent([
|
|
||||||
// [0, 0],
|
|
||||||
// [width, height]
|
|
||||||
// ])
|
|
||||||
// .on("zoom", updateChart);
|
|
||||||
//
|
|
||||||
// // Add the line variable: where both the line and the brush take place
|
|
||||||
// var line = svg.append('g')
|
|
||||||
// .attr("clip-path", "url(#clip-" + key + ")")
|
|
||||||
// .call(zoom);
|
|
||||||
//
|
|
||||||
// // Create a brush for each graph
|
|
||||||
// var brush = d3.brushX()
|
|
||||||
// .extent([
|
|
||||||
// [0, 0],
|
|
||||||
// [width, height]
|
|
||||||
// ])
|
|
||||||
// .on("end", updateChart);
|
|
||||||
//
|
|
||||||
// // Add the line
|
|
||||||
// line.append("path")
|
|
||||||
// .datum(dataSubset)
|
|
||||||
// .attr("class", "line") // I add the class line to be able to modify this line later on.
|
|
||||||
// .attr("fill", "none")
|
|
||||||
// .attr("stroke", "steelblue")
|
|
||||||
// .attr("stroke-width", 1.5)
|
|
||||||
// .attr("d", d3.line()
|
|
||||||
// .x(function(d) {
|
|
||||||
// return x(d.date)
|
|
||||||
// })
|
|
||||||
// .y(function(d) {
|
|
||||||
// return y(d.value)
|
|
||||||
// })
|
|
||||||
// );
|
|
||||||
//
|
|
||||||
// // Add the brushing
|
|
||||||
// line.append("g")
|
|
||||||
// .attr("class", "brush")
|
|
||||||
// .call(brush);
|
|
||||||
//
|
|
||||||
// // A function that set idleTimeOut to null
|
|
||||||
// let idleTimeout
|
|
||||||
//
|
|
||||||
// function idled() {
|
|
||||||
// idleTimeout = null;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// // A function that update the chart for given boundaries
|
|
||||||
// function updateChart(event, d) {
|
|
||||||
// // What are the selected boundaries?
|
|
||||||
// var extent = event.selection
|
|
||||||
//
|
|
||||||
// // If no selection, back to initial coordinate. Otherwise, update X axis domain
|
|
||||||
// if (!extent) {
|
|
||||||
// x.domain([4, 8]);
|
|
||||||
// } else {
|
|
||||||
// x.domain([x.invert(extent[0]), x.invert(extent[1])]);
|
|
||||||
// line.select(".brush").call(brush.move, null); // This removes the grey brush area as soon as the selection has been done
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// // Update axis and line position
|
|
||||||
// dict_xAxis[dataSubset].transition().duration(1000).call(d3.axisBottom(x));
|
|
||||||
// line
|
|
||||||
// .select('.line')
|
|
||||||
// .transition()
|
|
||||||
// .duration(1000)
|
|
||||||
// .attr("d", d3.line()
|
|
||||||
// .x(function(d) {
|
|
||||||
// return x(d.date)
|
|
||||||
// })
|
|
||||||
// .y(function(d) {
|
|
||||||
// return y(d.value)
|
|
||||||
// })
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// // If user double click, reinitialize the chart
|
|
||||||
// svg.on("dblclick", function() {
|
|
||||||
// x.domain(d3.extent(data, function(d) {
|
|
||||||
// return d.date;
|
|
||||||
// }))
|
|
||||||
// dict_xAxis[dataSubset].transition().call(d3.axisBottom(x));
|
|
||||||
// line
|
|
||||||
// .select('.line')
|
|
||||||
// .transition()
|
|
||||||
// .attr("d", d3.line()
|
|
||||||
// .x(function(d) {
|
|
||||||
// return x(d.date)
|
|
||||||
// })
|
|
||||||
// .y(function(d) {
|
|
||||||
// return y(d.value)
|
|
||||||
// })
|
|
||||||
// );
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
//
|
|
||||||
});
|
});
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user