We Keep Coding

Sankey diagram with D3 v7 - mouseover node highlights links

I am making a Sankey diagram with D3 v7 where I hope that on mouseover of the node all connected paths will be highlighted and the other nodes will lower in opacity.
I’ve tried to follow this example: D3.js Sankey Chart - How can I highlight the set of links coming from a node? but I am new to JS so am not sure what this part is doing
function (l) {return l.source === d || l.target === d ? 0.5 : 0.2;});
I am finding that there are many examples of this for v4 of d3 but I can’t find one that works on v7.
In addition, I would like fade out all nodes that are not connected to the selected node. Is this possible?
Any advice would be very much appreciated!
Screen shot of current layout:
Would like it to be like this on mouseover of node:
// set the dimensions and margins of the graph
var margin = { top: 10, right: 50, bottom: 10, left: 50 },
width = 1920 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;
// format variables
var formatNumber = d3.format(",.0f"), // zero decimal places
format = function (d) { return formatNumber(d); },
color = d3.scaleOrdinal().range(["#002060ff", "#164490ff", "#4d75bcff", "#98b3e6ff", "#d5e2feff", "#008cb0ff"]);
// append the svg object to the body of the page
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Set the sankey diagram properties
var sankey = d3.sankey()
.nodeWidth(100)
.nodePadding(40)
.size([width, height]);
var path = sankey.links();
// load the data
d3.json("sankey.json").then(function (sankeydata) {
graph = sankey(sankeydata);
// add in the links
var link = svg.append("g").selectAll(".link")
.data(graph.links)
.enter().append("path")
.attr("class", "link")
.attr("d", d3.sankeyLinkHorizontal())
.attr("stroke-width", function (d) { return d.width; });
// add the link titles
link.append("title")
.text(function (d) {
return d.source.name + " → " +
d.target.name;
});
// add in the nodes
var node = svg.append("g").selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
// add the rectangles for the nodes
node.append("rect")
.attr("x", function (d) { return d.x0; })
.attr("y", function (d) { return d.y0; })
.attr("height", function (d) { return d.y1 - d.y0; })
.attr("width", sankey.nodeWidth())
.style("fill", function (d) {
return d.color = color(d.name.replace(/ .*/, ""));
})
// Attempt at getting whole length of link to highlight
.on("mouseover", function (d) {
link
.transition()
.duration(300)
.style("stroke-opacity", function (l) {
return l.source === d || l.target === d ? 0.5 : 0.2;
});
})
.on("mouseleave", function (d) {
link
.transition()
.duration(300)
.style("stroke-opacity", 0.2);
})
// Node hover titles
.append("title")
.text(function (d) {
return d.name + "\n" + format(d.value);
});
// add in the title for the nodes
node.append("text")
.style("fill", "#3f3f3f")
.attr("x", function (d) { return d.x0 - 6; })
.attr("y", function (d) { return (d.y1 + d.y0) / 2; })
.attr("dy", "0.35em")
.attr("text-anchor", "end")
.text(function (d) { return d.name; })
.filter(function (d) { return d.x0 < width / 2; })
.attr("x", function (d) { return d.x1 + 6; })
.attr("text-anchor", "start")
;
});

Tooltip is not showing at appended 'rect' on top of point/circle in d3 chart

I have a d3 line chart with a tooltip, I am facing a problem with a tooltip.
I have functionality, on click of points/circle I am appending rect to g, which is adding on top of the existing rect which has the tooltip functionality.
My tooltip is not coming at selected(rect) Graph Point.
g.append("rect")
.attr("class", "overlay")
.attr("id", "firstLayer")
.attr("width", width)
.attr("height", height)
.on("mouseover", function(d) {
focus.style("display", null);
div
.transition()
.duration(200)
.style("opacity", 0.9);
})
.on("click", function(d, index) {
let newXScale = newX ? newX : xScale;
if (rect) rect.remove();
rect = g
.append("rect")
.attr("x", newXScale(d.startTime) - 12.5)
.attr("y", 0)
.attr("width", 24)
.attr("height", height + 5)
.attr("data", d.startTime)
.style("fill", "steelblue")
.style("opacity", 0.5);
if (clickLine) clickLine.remove();
clickLine = g
.append("line")
.attr("x1", newXScale(d.startTime))
.attr("y1", yScale(yDomain[0]))
.attr("x2", newXScale(d.startTime))
.attr("y2", yScale(yDomain[1]))
.attr("class", "focusLine")
.style("opacity", 0.5);
})
rect element is coming on top of the gm on hover of that tooltip is not coming, any suggestions on how to fix it ?
On mouse hover -
At selected Graph Point -
CodeSandbox link below -
https://codesandbox.io/s/damp-dawn-82hxc
Please guide me what can be changed.

on click of the circle you are appending another rectangle to g, which is adding on top of the existing rect which has the tool tip functionality
Note: d3 js adds layer/shape on top of another which basically overrides the existing layer/shape functionality with the new layer/shape if they are in the same position
To avoid that we have to draw the layers depends on their intended purpose and position.
Solution for the above problem
append background rects for circle you want to create with opacity: 0
g.selectAll(".faaa")
.data(data)
.enter()
.append("rect")
.attr("class", "faaa")
.attr("id", d => "rect_" + d.id)
.attr("x", d => xScale(d.startTime) - 12.5)
.attr("y", 0)
.attr("width", 24)
.attr("height", height + 5)
.attr("data", d => d)
.style("fill", "steelblue")
.style("opacity", 0);
append firstLayer rect which has the tooltip functionality so the background rect won't break the tooltip functionality
g.append("rect")
.attr("class", "overlay")
.attr("id", "firstLayer")
.attr("width", width)
.attr("height", height)
.on("mouseover", function(d) {
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> Changes : ${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);
});
append circle and add click functionality then change the opacity to highlight the background rect
g.selectAll(".foo")
.data(data)
.enter()
.append("circle")
.attr("id", d => d.id)
.attr("class", "foo")
.attr("data", d => d)
.attr("cx", function(d) {
return xScale(d.startTime);
})
.attr("cy", function(d) {
return yScale(d.magnitude);
})
.attr("r", function(d) {
return 6;
})
.on("click", function(d) {
// change the opacity here
d3.select("#rect_" + d.id).style("opacity", 0.5);
})
.attr("class", "circle");
Hope this solves the above problem...

update line when dragging point in grouped multiline chart

I'm attempting my first foray into D3.js - the aim is a grouped multiline chart with draggable points, in which dragging a point results in the connecting line being updated too. Eventually, the updated data should be passed back to r (via r2d3() ). So far I managed to get the base plot and to make the points draggable... but when it comes to updating the line (and passing back the data?) I have been hitting a wall for hours now. Hoping someone might help me out?
I'm pasting the full script because I don't trust myself to not have done something truly unexpected anywhere. The code to do with dragging is all positioned at the bottom. In it's current form, dragging a circle makes the first of the lines (the lightblue one) disappear - regardless of which of the circles is dragged. On draggend the lines are drawn again with the default (smaller) stroke, which is of course not how it should work in the end. Ideally the line moves with the drag movement, althoug I'd also be happy if an updated line was drawn back again only after the drag ended.
I think that what I need to know is how to get the identifying info from the dragged circle, use it to update the corresponding variable in data (data is in wide format, btw), and update the corresponding path.
bonus question: drag doesn't work when making x scaleOrdinal (as intended). Is there a workaround for this?
// !preview r2d3 data= data.frame(id = c(1,1,2,2,3,3,4,4,5,5), tt = c(1, 2, 1, 2, 1, 2, 1, 2, 1, 2), val = c(14.4, 19.3, 22.0, 27.0, 20.7, 25.74, 16.9, 21.9, 18.6, 23.6))
var dById = d3.nest()
.key(function(d) {
return d.id;
})
.entries(data);
var margin = {
top: 40,
right: 40,
bottom: 40,
left: 40
},
width = 450 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var color = d3.scaleOrdinal()
.range(["#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99"]);
var x = d3.scaleLinear()
.range([0.25 * width, 0.75 * width])
.domain([1, 2]);
var y = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(data, function(d) {
return d.val * 1.1;
})]);
var xAxis = d3.axisBottom(x),
yAxis = d3.axisLeft(y);
// Define the line by data variables
var connectLine = d3.line()
.x(function(d) {
return x(d.tt);
})
.y(function(d) {
return y(d.val);
});
svg.append('rect')
.attr('class', 'zoom')
.attr('cursor', 'move')
.attr('fill', 'none')
.attr('pointer-events', 'all')
.attr('width', width)
.attr('height', height)
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var focus = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
focus.selectAll('lines')
.data(dById)
.enter().append("path")
.attr("class", "line")
.attr("d", function(d) {
return connectLine(d.values);
})
.attr("stroke", function(d) {
return color(d.key);
})
.attr('stroke-width', 4);
focus.selectAll('circles')
.data(dById)
.enter().append("g")
.attr("class", "dots")
.selectAll("circle")
.data(function(d) {
return d.values;
})
.enter().append("circle")
.attr("cx", function(d) {
return x(d.tt);
})
.attr("cy", function(d) {
return y(d.val);
})
.attr("r", 6)
.style('cursor', 'pointer')
.attr("fill", function(d) {
return color(d.id);
})
.attr("stroke", function(d) {
return color(d.id);
});
focus.append('g')
.attr('class', 'axis axis--x')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
focus.append('g')
.attr('class', 'axis axis--y')
.call(yAxis);
/// drag stuff:
let drag = d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended);
focus.selectAll('circle')
.call(drag);
// focus.selectAll('line')
// .call(drag);
function dragstarted(d) {
d3.select(this).raise().classed('active', true);
dragID = Math.round(x.invert(d3.event.x));
// get x at start in order to force the dragged circle to stay at this x-value (i.e. allow it to vertically only)
}
function dragged(d) {
dragNewY = y.invert(d3.event.y);
d3.select(this)
.attr('cx', x(dragID))
.attr('cy', y(dragNewY));
// focus.selectAll('path')
// .attr("d", function(d) { return connectLine(d); }); // removes all lines (to be redrawn at dragended with a smaller stroke)
focus.select('path').attr("d", function(d) {
return connectLine(d);
}); // removes first lines (to be redrawn at dragended with a smaller stroke)
// How do I select only the line associated with the dragged circle?
}
function dragended(d) {
d3.select(this).classed('active', false);
focus.selectAll('lines')
.data(dById)
.enter().append("path")
.attr("class", "line")
.attr("d", function(d) {
return connectLine(d.values);
})
.attr("stroke", function(d) {
return color(d.key);
});
}

Update the data point associated with the circle and then update the circle and all the lines.
Do not add new lines in the dragend()
function dragged(d) {
dragNewY = y.invert(d3.event.y);
d.val = dragNewY;
d3.select(this)
.attr('cx', d => x(d.tt))
.attr('cy', d => y(d.val));
// focus.selectAll('path')
// .attr("d", function(d) { return connectLine(d); }); // removes all lines (to be redrawn at dragended with a smaller stroke)
focus.selectAll('path').attr("d", function(d) {
return connectLine(d.values);
}); // removes first lines (to be redrawn at dragended with a smaller stroke)
// How do I select only the line associated with the dragged circle?
}
function dragended(d) {
d3.select(this).classed('active', false);
// focus.selectAll('lines')
// .data(dById)
// .enter().append("path")
// .attr("class", "line")
// .attr("d", function(d) { return connectLine(d.values); })
// .attr("stroke", function(d) { return color(d.key); });
}

SVG rect border, not stroke

I am making a d3 graph and trying to put a border around my rect elements. The rect elements are appended to a cell and the text elements are appended to the same cell. Thus if I change the stroke in the rect I lose all the text for some reason, and if I change the stroke in the cell the borders and fonts change too.
This is a portion of my code for drawing the graph.
this.svg = d3.select("#body").append("div")
.attr("class", "chart")
.style("position", "relative")
.style("width", (this.w +this.marginTree.left+this.marginTree.right) + "px")
.style("height", (this.h + this.marginTree.top + this.marginTree.bottom) + "px")
.style("left", this.marginTree.left +"px")
.style("top", this.marginTree.top + "px")
.append("svg:svg")
.attr("width", this.w)
.attr("height", this.h)
.append("svg:g")
.attr("transform", "translate(.5,.5)");
this.node = this.root = this.nestedJson;
var nodes = this.treemap.nodes(this.root)
.filter(function(d) { return !d.children; });
this.tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) {
return "<span style='color:white'>" + (d.name+",\n "+d.size) + "</span>";
})
this.svg.call(this.tip);
var cell = this.svg.selectAll("g")
.data(nodes)
.enter().append("svg:g")
.attr("class", "cell")
.call(this.position)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("click", function(d) { return this.zoom(this.node == d.parent ? this.root : d.parent); })
.style("border",'black');
var borderPath = this.svg.append("rect")
.attr("x", this.marginTree.left)
.attr("y", this.marginTree.top)
.attr("height", this.h - this.marginTree.top - this.marginTree.bottom )
.attr("width", this.w - this.marginTree.left - this.marginTree.right)
.style("stroke", 'darkgrey')
.style("fill", "none")
.style("stroke-width", '3px');
cell.append("svg:rect")
.attr("id", function(d,i) { return "rect-" + (i+1); })
.attr("class","highlighting2")
.attr("title", function(d) {return (d.name+", "+d.size);})
.attr("data-original-title", function(d) {return (d.name+",\n "+d.size);})
.attr("width", function(d) { return d.dx - 1; })
.attr("height", function(d) { return d.dy ; })
.on('mouseover', this.tip.show)
.on('mouseout', this.tip.hide)
.style("fill", function(d) {return coloring(d.color);});
cell.append("svg:text")
.attr("class", "treemap-text nameTexts")
.attr("id", function(d,i) { return "name-" + (i+1); })
.attr("x", cellMargin)
.attr("y", function(d) { return parseInt($('.treemap-text').css('font-size'))+cellMargin; })
.text(function(d) {return (d.name);});
cell.append("svg:text")
.attr("class", "treemap-text sizeTexts")
.attr("id", function(d,i) { return "size-" + (i+1); })
.attr("x", cellMargin)
.attr("y", function(d) { return 2*parseInt($('.treemap-text').css('font-size'))+2*cellMargin; })
.text(function(d) {return (d.size);});
Additionally, I thought about creating lines and drawing four lines around each rect element, but was wondering if there is an easier way. Thanks.

I didn't check fully through your source, it would also be helpful to work with jsbin, codepen, jsfiddle or other online platforms to show your problem.
Actually I think you just have misinterpreted the SVG presentation attributes and their styling with CSS. For SVG elements only SVG presentation attributes are valid in CSS. This means there is no border property as you have it in your code. Also note that for <text> elements the fill color is the font-body color and the stroke is the outline of the font. Consider that stroke and fill are inherited down to child element which means that if you have a rectangle with a stroke style and some containing text element that they will have the stroke applied as outline and you'd need to override the styles there.
Hope you can solve your issue.
Cheers
Gion

Dragging and panning in d3 force layout

I'm working on a force layout graph that displays relationships of writers. Since there are so many, I tried to implement zooming and dragging. Zooming works fine (with one exception), but when I drag a node it also drags the background. I tried following Mike Bostock's directions here and the StackOverflow question paired with it, but it still won't work. I based most of the code for the graph on this, which works beautifully, but since he used an older version of d3, his dragging breaks in the new version. (I can't just use the older version of d3 because I have some other parts of the graph not shown here that work only with the newer version.)
I think the problem has something to do with my grouping of SVG objects, but I also can't figure out what I'm doing wrong there. This also brings in the one zooming problem; when I zoom in or pan around, the legend also moves and zooms in. If there's an easy fix to make it stay still and sort of "hover" above the graph, that would be great.
I'm very new to coding, so I'm probably making really stupid mistakes, but any help would be appreciated.
Fiddle.
var graphData = {
nodes: [
{
id:0,
name:"Plotinus"
},
{
id:1,
name:"Iamblichus"
},
{
id:2,
name:"Porphyry"
}
],
links: [
{
relationship:"Teacher/student",
source:0,
target:1
},
{
relationship:"Enemies",
source:0,
target:2
},
{
relationship:"Family",
source:1,
target:2
}
]
};
var linkColor = d3.scale.category10(); //Sets the color for links
var drag = d3.behavior.drag()
.on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); })
.on("drag", function(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
});
var w = 300,
h = 300;
var vis = d3.select(".graph")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("pointer-events", "all")
.append('svg:g')
.call(d3.behavior.zoom().on("zoom", redraw))
.append('svg:g');
vis.append('svg:rect')
.attr('width', w)
.attr('height', h)
.attr('fill', 'rgba(1,1,1,0)');
function redraw() {
vis.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); }
var force = d3.layout.force()
.gravity(.6)
.charge(-600)
.linkDistance( 60 )
.size([w, h]);
var svg = d3.select(".text").append("svg")
.attr("width", w)
.attr("height", h);
var link = vis.selectAll("line")
.data(graphData.links)
.enter().append("line")
.style("stroke", function(d) { return linkColor(d.relationship); })
.style("stroke-width", 1)
.attr("class", "connector");
var node = vis.selectAll("g.node")
.data(graphData.nodes)
.enter().append("svg:g")
.attr("class","node")
.call(force.drag);
node.append("svg:circle")
.attr("r", 10) //Adjusts size of nodes' radius
.style("fill", "#ccc");
node.append("svg:text")
.attr("text-anchor", "middle")
.attr("fill","black")
.style("pointer-events", "none")
.attr("font-size", "9px")
.attr("font-weight", "100")
.attr("font-family", "sans-serif")
.text( function(d) { return d.name;} );
// Adds the legend.
var legend = vis.selectAll(".legend")
.data(linkColor.domain().slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-10," + i * 20 + ")"; });
legend.append("rect")
.attr("x", w - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", linkColor);
legend.append("text")
.attr("x", w - 24)
.attr("y", 9)
.attr("dy", ".35em")
.attr("class", "legendText")
.style("text-anchor", "end")
.text(function(d) { return d; });
force
.nodes(graphData.nodes)
.links(graphData.links)
.on("tick", tick)
.start();
function tick() {
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";});
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
}

I think I figured it out.
I had to combine the instructions from here and here, which was sort of already answered in the answer I linked.
My old way, grabbed from the first example, looked like this:
var drag = d3.behavior.drag()
.on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); })
.on("drag", function(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
});
The problem was that I was focusing on d3.behavior.drag() instead of force.drag, which I think Stephen Thomas was trying to tell me. It should look like this:
//code code code//
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
d3.select(this).classed("dragging", true);
}
function dragged(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) {
d3.select(this).classed("dragging", false);
}
//code code code//
var drag = force.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);

You can use the drag() method of the force object instead of creating a separate drag behavior. Something like:
node.call(force.drag);
or, equivalently,
force.drag(node);
A complete example is available at http://bl.ocks.org/sathomas/a7b0062211af69981ff3

Here is what is working for me:
const zoom = d3.behavior.zoom()
.scaleExtent([.1, 10])
.on('zoom', zoomed);
const force = d3.layout.force()
.(...more stuff...);
const svg = d3.select('.some-parent-div')
.append('svg')
.attr('class', 'graph-container')
.call(zoom);
const mainGroup = svg.append('g');
var node = mainGroup.selectAll('.node');
node.enter()
.insert('g')
.attr('class', 'node')
.call(force.drag)
.on('mousedown', function(){
// line below is the key to make it work
d3.event.stopPropagation();
})
.(...more stuff...);
function zoomed(){
force.stop();
const canvasTranslate = zoom.translate();
mainGroup.attr('transform', 'translate('+canvasTranslate[0]+','+canvasTranslate[1]+')scale(' + zoom.scale() + ')');
force.resume();
}

With your code, the node can be dragged but when you drag a node other nodes will move too. I come up this to stop rest of nodes and just let you finished dragging then re-generated the whole graph
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
d3.select(this).classed("fixed", d.fixed = true);
}
function dragged(d) {
force.stop();
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
tick();
}
function dragended(d) {
force.resume();
}