d3fc | A collection of components that make it easy to build | Chart library

Firstly, scale.invert is meant for when you have the pixel coordinate, but not the corresponding datum value. This is relevant when you are doing clicks on a screen, for example. In this case, it's not the right tool for the job. You already have access to datum, so you just need to call scaleY(datum.close).

However, d3fc uses canvas.translate() to change the zero point to .mainvalue(). Therefore, you cannot simply use scaleY(datum.close) to get the y-coordinate of the close value. Instead of (x, y), each point you want to draw becomes (0, y(arrow) - y(d.close)). So you need to change the logic to reflect this.

Needing to clean up after yourself with context.translate() is a recipe for bugs, It's almost always better to avoid such things.

As a final note, I had some confusion about your getMarks function. If you want to draw 5 arrows evenly distributed over your bar, you need to have a gap of 1/4th of the bar height. Think of it like trees on a street. If the trees at 10 feet apart and the street is 100 feet long, you'll have 11 trees, not 10. Because of this, I drew 6 plus signs, not 5, because otherwise it looked kind of off balance.

You supply your scales to the D3FC cartesian chart, which then couples these with the axes that it creates for you.

As mentioned in the documentation the chart exposes the properties of the X and Y axes with an x and y prefix. So, if you want to change the tick format for the X axis, which you would typically do via the tickFormat property, you instead do the following:

Now this functionality has been released, the code should look like this -

You can create another zoom behavior which only changes the Y domain. Then, in the drag handler, call the new behavior's scaleBy on the plot area with a scale factor based on the drag event's delta Y:

I understand you've raised the issue with d3fc github, therefore I'll assume you are aware that util/snap.js is been deprecated.

Since this functionality unsupported now, it seems that the only feasible way to work around it will be to implement your own.

I took your pen and original snap.js code as starting point and applied the method outlined in Simple Crosshair example from the documentation.

I ended up having to add missing functions and their dependencies verbatim (surely you can refactor and package it up into a separate module):

This looks very much like a bug in the canvas point series implementation. If you look at the source code, the path instructions are executed:

https://github.com/d3fc/d3fc/blob/master/packages/d3fc-series/src/canvas/point.js#L23

Following which, decorate is called:

https://github.com/d3fc/d3fc/blob/master/packages/d3fc-series/src/canvas/point.js#L28

As a result, decorate can modify the fill and stroke, but not modify the drawing functions in any way. This should be a simple fix.

Just copy the whole code block and into your index.html file and the script in to the js file and include using the script src path. then declare the chart handler i.e

First I changed all script url to https

Your problem is in this code:

I believe the problem lies in the fact that you are not passing single coordinates as the label's position.

layoutLabel.position(accessor)

Specifies the position for each item in the associated array. The accessor function is invoked exactly once per datum, and should return the position as an array of two values, [x, y].

In the example you show, that you are basing the design on, the variable places contains point geometries, it is to these points that labels are appended. Looking in the topojson we find places looking like: