sam.hadow/aliexpress-price-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

clipPath

Browse Source
This commit is contained in:
Sam Hadow 2024-01-23 21:50:30 +01:00
parent 6e458bf6a7
commit ab145e8602
1 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/app.js
View File

@ -1,9 +1,9 @@
// set the margins of the graph // set the margins of the graph
const margin = { const margin = {
top: 10, top: 10,
right: 60, right: 30,
bottom: 30, bottom: 30,
left: 30 left: window.innerWidth*0.1
}; };
// get window size // get window size
const width = window.innerWidth - margin.right - margin.left -10; const width = window.innerWidth - margin.right - margin.left -10;
@ -23,9 +23,10 @@ d3.csv('http://127.0.0.1/output.csv', d => {
} }
}).then(function(data) { }).then(function(data) {
// Date domain (width)
const x = d3.scaleTime() const x = d3.scaleTime()
.domain(d3.extent(data, d => d.date)) .domain(d3.extent(data, d => d.date))
.range([0, width]); .range([3, width-3]);
// Group the data by (itemid, skuid) // Group the data by (itemid, skuid)
const nestedData = d3.group(data, d => d.skuid); const nestedData = d3.group(data, d => d.skuid);
@ -51,7 +52,7 @@ d3.csv('http://127.0.0.1/output.csv', d => {
svgs.each(function(key) { svgs.each(function(key) {
const dataSubset = nestedData.get(key); const dataSubset = nestedData.get(key);
// Date domain (width) // Price domain (height)
const y = d3.scaleLinear() const y = d3.scaleLinear()
.domain([d3.min(dataSubset, d => d.value) - 1, d3.max(dataSubset, d => d.value) + 1]) .domain([d3.min(dataSubset, d => d.value) - 1, d3.max(dataSubset, d => d.value) + 1])
.range([height, 0]); .range([height, 0]);
@ -67,11 +68,29 @@ d3.csv('http://127.0.0.1/output.csv', d => {
svg.append("g") svg.append("g")
.call(d3.axisLeft(y)); .call(d3.axisLeft(y));
// clipPath, area drawn
const clip_line = svg.append("defs").append("svg:clipPath")
.attr("id", "clip_line")
.append("svg:rect")
.attr("width", width )
.attr("height", height )
.attr("x", 0)
.attr("y", 0);
const clip_dot = svg.append("defs").append("svg:clipPath")
.attr("id", "clip_dot")
.append("svg:rect")
.attr("width", width+10 )
.attr("height", height+10 )
.attr("x", -5)
.attr("y", -5);
// lines between dots // lines between dots
// plotted before dots to stay below them // plotted before dots to stay below them
svg.append("path") svg.append("path")
.datum(dataSubset) .datum(dataSubset)
.attr("id", "line_path") .attr("id", "line_path")
.attr("clip-path", "url(#clip_line)") // bind to clipPath
.attr("fill", "none") .attr("fill", "none")
.attr("stroke", "black") .attr("stroke", "black")
.attr("stroke-width", 1.5) .attr("stroke-width", 1.5)
@ -80,16 +99,6 @@ d3.csv('http://127.0.0.1/output.csv', d => {
.y(d => y(d.value)) .y(d => y(d.value))
); );
// ZOOM
// clipPath, area drawn
const clip = svg.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("width", width )
.attr("height", height )
.attr("x", 0)
.attr("y", 0);
// brushing // brushing
const brush = d3.brushX() const brush = d3.brushX()
.extent( [ [0,0], [width,height] ] ) // select whole graph .extent( [ [0,0], [width,height] ] ) // select whole graph
@ -169,7 +178,6 @@ d3.csv('http://127.0.0.1/output.csv', d => {
// Interaction functions // Interaction functions
const mouseover = function(event, d) { const mouseover = function(event, d) {
// var formatted_date = `${d.date.getDate()}-${d.date.getMonth()}-${d.date.getFullYear()}`;
var formatted_date = d.date.toISOString().split('T')[0] var formatted_date = d.date.toISOString().split('T')[0]
Tooltip Tooltip
.style("opacity", 1) .style("opacity", 1)
@ -196,6 +204,7 @@ d3.csv('http://127.0.0.1/output.csv', d => {
.data(dataSubset) .data(dataSubset)
.enter() .enter()
.append("circle") .append("circle")
.attr("clip-path", "url(#clip_dot)") // bind to clipPath
.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", 5) .attr("r", 5)