All is well. The chart is created as expected. The question I have is related to Plot.pointerX. Based upon the documentation here: Pointer transform | Observable Plot we can create a listener for the pointer event as stated:
The pointer transform emits an input event whenever the focused points changes, and sets the value of the plot element to the focused data. This allows you to use a plot as an Observable view (viewof), or to register an input event listener to react to pointing.
I implemented this listener as follows and it works as stated and e.target.value contains the data from the point as expected:
document.addEventListener("input", updateValue);
function updateValue(e) {
console.log(e);
console.log(e.target.value);
}
The question I have is: Can the mouse position (x,y coords) be obtained from this event such that I know the position of the ādotā that is being hovered when the event is fired? Much thanks in advance
(@Fil tagging you in the off chance you happen to be available).
No, the input event generated by Plot is not a mouse or pointer event, and so doesnāt have corresponding coordinates for the mouse or pointer position. More technically, it is an InputEvent, which is a UIEvent, but you need a MouseEvent if you want mouse or pointer coordinates. Plot wonāt tell you the mouse event that triggered the input event.
That said, you can listen for mouse or pointer events yourself, and then do something with those coordinates or stash them somewhere, so that you know the mouse or pointer position(s) when you receive an input event from Plot.
Maybe you could describe what you are trying to do at a higher level?
Iām basically trying to achieve the mouseover affect seen here: Monthly Recurring Revenue - Baremetrics Demo (but based upon plot rather then straight d3). Here is where I am at: Untitled / Brian | Observable (keeping in mind Iām using this outside of observable notebooks - standard js).
I want to overlay html on the SVG using standard JS but I need to know the location of the dot/pointer that is currently active so I can offset the location of the div appropriately. I can show/hide the div already, but the location is problematic. As a note, Iām using the standard tip currently just as a proof of concept, but that would go away once the JS/HTML solution is achievable. Any thoughts/insights are greatly appreciated.
And thanks as always for the awesome work you continue to do on d3/plot!
@Cobus Thank you! I did see that post and I agree that is the idea I am going for. However it appears the d3 selector is for all ācirclesā
let dots = d3.select(map).selectAll("circle");
I actually have two different circles (one at the top of the area and one on the baseline), only one of which (the top) should be used for the position of the tooltipā¦
Is it possible to give a more specific selector to one of these so as to target one over the other?
I think it would be great if you could specify a class or id attribute to a mark but I donāt think thatās an option. Of course, you can take any action you like as a function of the title attribute. For example, you might take no action at all, if the title is null.
Adding an id is problematic if you have several charts on a page, so this is probably not going to be done. Iām still in favor of a simple option to add a className (note that itās already possible to do this within a render transform, but thatās obviously too complicated).
@Fil Iām specifically addressing the className (which is what would work for me) which is what I believe the patch I was asking about already solves?
Could you look into the pull request and see what is necessary to pull that into the main branch? I donāt think it has anything to do with āidā's based on what I read, but I could be wrong?
Also, do you have an example of the render transform? Iām willing to use that for the moment if it can target one set of plot ācircles/dotsā and not the other.
I know, I was commenting on Markās mention of id. For an example with the render transform, see opacity artifacts in line segments - #2 by Fil. We donāt recommend using that route though, because itās much more complicated that needs to be.
In your case, you could set a specific ariaDescription option on the mark you want to target, for example ariaDescription: "informational dots about cities".
Then select this marksā dots with, for example:
In a sense this works like the desired className, except itās āhijackingā the aria-description propertyāand as a consequence itās recommended to set the contents of that property to a semantically correct sentence.
