Commit 2b164824 authored by Matija Obreza's avatar Matija Obreza
Browse files

Highlight on mouse hover

parent fa127def
'use strict';
require('../styles/app.css');
const d3 = Object.assign({}, require("d3"));
import { Library } from '@observablehq/stdlib';
const observablehq = new Library();
......@@ -12,7 +13,7 @@ d3.sankeyLinkHorizontal = sankeyLinkHorizontal;
console.log(`We're here!`, document.getElementById("tree-container").offsetWidth);
const width = document.getElementById("tree-container").offsetWidth;
const height = Math.max(400, width * 0.6);
const height = Math.max(200, width * 0.6);
console.log(`Dimensions (${width}x${height})`);
......@@ -39,8 +40,13 @@ const sankeyx = ({ nodes, transfers }) => {
}
const chart = (data) => {
const opacityDefault = 0.5;
const opacityLight = 0.2;
const opacityHighlight = 0.9;
const svg = d3.select("#tree-container").append("svg:svg")
.attr("viewBox", [0, 0, width, height])
.attr("class", "sankey")
.style("width", "100%")
.style("height", height);
......@@ -59,12 +65,25 @@ const chart = (data) => {
.attr("height", d => d.y1 - d.y0)
.attr("width", d => d.x1 - d.x0)
.attr("fill", d => `#d0d0d0`)
.on('mouseover', function(d, i) {
console.log(`mouseover ${i}`, d);
svg.selectAll(`path`).transition().style("stroke-opacity", opacityLight);
d.targetLinks.forEach((link) => {
// console.log(`.group${link.cluster}`);
svg.selectAll(`path.group${link.cluster}`).transition().style("stroke-opacity", opacityHighlight);
})
})
.on('mouseout', function(d, i) {
// console.log(`mouseout ${i}`, d);
svg.selectAll(`path`).transition().style("stroke-opacity", opacityDefault);
})
.append("title")
.text(d => `${d.name}\n${format(d.value)}`);
.text(d => `${d.name}\n${format(d.value)}`)
;
const link = svg.append("g")
.attr("fill", "none")
.attr("stroke-opacity", 0.5)
// .attr("stroke-opacity", 0.5)
.selectAll("g")
.data(links)
.join("g")
......@@ -92,10 +111,21 @@ const chart = (data) => {
.attr("d", d3.sankeyLinkHorizontal())
// .attr("stroke", d => d.uid)
.attr("stroke", d => color(`${d.cluster}`))
.attr("stroke-width", d => Math.max(1, d.width));
link.append("title")
.text(d => `${d.source.name}${d.target.name}\n${format(d.value)}`);
.attr("stroke-width", d => Math.max(1, d.width))
.attr("stroke-opacity", opacityDefault)
.attr("class", d => `group${d.cluster}`)
.on('mouseover', function(d, i) {
// console.log(`Doing .group${d.cluster}`, svg.selectAll(`path.group${d.cluster}`));
svg.selectAll(`path`).transition().style("stroke-opacity", opacityLight);
svg.selectAll(`path.group${d.cluster}`).transition().style("stroke-opacity", opacityHighlight);
})
.on('mouseout', function(d, i) {
// console.log(`mouseout ${i}`, d);
svg.selectAll(`path`).transition().style("stroke-opacity", opacityDefault);
});
// link.append("title")
// .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`);
svg.append("g")
.style("font", "14px Tahoma")
......@@ -121,11 +151,12 @@ const data = {
{ name: "NOR051" }
],
transfers: [
{ value: 50, target: [ 4 ] },
{ value: 30, target: [ 1, 3, 4 ]},
{ value: 40, target: [ 1, 4 ]},
{ value: 10, target: [ 1, 2, 3, 4 ]},
{ value: 100, target: [ 1, 2, 3, 4 ]},
{ value: 30, target: [ 2, 4 ]},
{ value: 50, target: [ 3 ] },
{ value: 25, target: [ 3 ] },
{ value: 50, target: [ 1, 2, 4 ]},
{ value: 40, target: [ 2 ] },
{ value: 10, target: [ 3, 4 ]},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment