Develop Reference

javascript - placing a rectangle under another element

I have text, and I used a bbox to be able to add a rectangle to match the size of the text.
When I draw the rectangle it is the correct size, but the rectangle is on top of my text.
Is there a way to put the rectangle under the text?

You can use D3's insert to place the <rect> before the <text> in the SVG structure. For example:
svg.insert("rect", "text")
.attr("x", bbox.x)
.attr("y", bbox.y)
.attr("width", bbox.width)
.attr("height", bbox.height)
.attr('class',"rectFillBox")
.attr('fill','white')
.attr("fill-opacity", 0.5);

Brush functionality in my d3 line chart is not working as expected

My implementation for Brush & Zoom functionality in my d3 line chart is not working as expected,
I followed this link - https://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f,
Problems what I am facing is -
chart is not showing all the values, I have 4 data but it only shows 3 data
onClick of dot I am showing the rect which is not moving with the brush functionality
minor thing but chart always goes out of the box
My code sandbox - https://codesandbox.io/s/proud-firefly-xy1py
Can someone point out what I am doing wrong? thanks.
Please suggest me what I am doing wrong, thanks.

Your first point is going behind your clip area. For example, if you right click on the first visible circle and inspect element you will see all 4 circle elements are present in the dom. The first circle element is behind the axis.
This means you have to move your plot to the right. Unfortunately, the way you have coded the chart you have not appended a g element for the main chart and then appended the circles and path to that g element. As a result this has to be done in multiple places.
First we adjust your clip path as:
svg
.append("defs")
.append("SVG:clipPath")
.attr("id", "clip")
.append("SVG:rect")
.attr("width", containerWidth)
.attr("height", height)
.attr("x", 40)
.attr("y", 0);
next we adjust your circles
scatter
.selectAll(".foo")
.data(data)
.enter()
.append("circle")
.attr("class", "foo")
.attr("transform", "translate(40,0)")
and then your line
scatter
.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line)
.attr("transform", "translate(40,0)");
You will have to account for this 40 px translate for your other elements as well. Although I am having a hard time destructuring your svg. I think this should give you the idea though. Check the axis matches the time points as well.
Check the code sand box
Update
To make the rectangles move with the brush, you will have to add code to your brushed const function to recalculate the x, y, width and height using the updated scales.
Update2
After going through the codesandbox presented in the comments I was able to add the code to update the rectangles to the brushed const as below to make the rects also move with the brushing:
// update rectangles
scatter
.selectAll(".rect-elements")
.attr("x", d => {
console.log(d);
return xScale(d.startTime) - 12.5;
})
.attr("y", 0)
.attr("width", 24)
.attr("height", height + 5);
Full working Code Sandbox.

How to trigger a mouseover event for an SVG element below other elements

Currently learning d3.js v5
I am working with a graph that displays a tooltip when an area of the graph is hovered over, along with highlighting the graph area selected. The issue I have noticed is that whenever any bar or line is hovered over, the tooltip won't display, and the area is no longer highlighted until I move off that area.
I was wondering if there is a way to have the mouseover element read the SVG element under the bars and lines or if I also need to add event listeners to the bars and lines.
I could potentially add another rect element that is invisible over all the other elements so that it is triggered first, however I also want to add interactivity to the bars and lines in the graph.
d3.csv("test.csv").then(function(dataset) {
backBar.selectAll("rectBack")
.data(dataset)
.enter()
.append("rect")
.attr("class","rectBack")
.attr("x",(d)=>xScale((d.year)))
.attr("y",margin.top)
.attr("width",(w)/dataset.length)
.attr("height",h-topBottom)
.attr("opacity",0)
.attr("fill","lightgrey")
.on("mouseover",function(d){
d3.select(this)
.attr("opacity",0.3);
showTooltip(d);
})
.on("mouseout",function(){
d3.select(this)
.attr("opacity",0);
removeTooltip();
})
function showTooltip(d){
d3.select("body")
.append("div")
.attr("class","tooltip")
.attr("opacity",0.5)
.html("<h5>"+d.year+"</h5>")
.style("top", yLineScale(d.line1) + svgPos.offsetTop)
.style("left", xScale(d.year) + svgPos.offsetLeft)
console.log(d);
}
function removeTooltip(){
d3.selectAll(".tooltip")
.remove("*");
}
}
svgPos is a variable that holds the coordinates of the SVG
yLineScale and xScale are both scales for the X and Y axis respectively
Link to image of graph: https://imgur.com/a/7rJFQjd

d3 - required help in brush extent()

Here's the fiddle.
When I use the brush, the colored areas start off beyond the x axis defined.
For the line in the graph, I got a suggestion in this SO to add clip-path: url(#clip) to the line css. It works. After applying that, the line starts exactly from the 0 of x when using the brush.
But when I apply the same logic to the css of the .area.above and .area.below, it doesn't work.
The areas are clipped correctly but only one is actually displayed...from inspecting the elements in the browser developer tools, one of the areas is apparently overlaying the other.
Some one help me where I'm making the mistake?
Thanks in advance.

Here's a fiddle which I think does what you want: http://jsfiddle.net/henbox/jzPaq/
The problem was that you can only have one clip-path defined for an element. So adding the rectangular clipPath:
...append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
was over-writing the clip-below and clip-above ones (in <path class="area below"...> and <path class="area above"...> respectively.
The solution I used was based on this info: http://apike.ca/prog_svg_clip.html
For the 'below' I used the intersection of the rectangular (#clip) and 'below' clip paths, like this:
Give the path element an id (clipbelowshape):
focus.append("clipPath")
.attr("id", "clip-below")
.append("path")
.attr("id", "clipbelowshape")
.attr("d", area.y0(height));
Create the intersect of clip clipPath with clipbelowshape:
var clipbelowintersect = focus.append("clipPath")
.attr("id", "clipbelowintersect")
.attr("clip-path", "url(#clip)");
clipbelowintersect.append("use")
.attr("xlink:href", "#clipbelowshape");
Use the new intersect clip path
focus.append("path")
.attr("class", "area below")
.attr("clip-path", "url(#clipbelowintersect)")
.attr("d", area);
Do the same thing with the above path

How to unregister zoom behavior of SVG element in d3.js

I have register the zoom behavior with element, now I want to toggle between zoom-able and not zoom-able, does anyone know how to unregister the zoom behavior of SVG element ?
var svg = d3.select("#topology-div")
.append("svg")
.attr("class", "topology-map")
.attr("width", data.width)
.attr("height", data.height)
.call(zoom); // <<-- I want unregister zoom later

do you mean like:
svgElement.call(d3.behavior.zoom().on("zoom"); //deactivate zoom behavior