xdomain | A pure JavaScript CORS

Omit

.attr('stroke-width', lw)

when building the marker,

or replace lw with 1:

.attr('stroke-width', 1)

Both xScale and yScale are functions.

This is what you see when you log yScale and why you can use xScale "like a function". d3.scaleLinear() returns a function to scale values. In javascript, functions are objects, object properties can also be functions (methods in this case to set values such as domain and range).

Most simply: d3.scaleLinear() returns a function.

With d3 scales (and most d3 functions), you create a new scale function with d3.scaleLinear() and then use the scale's methods to set values such as the scale's domain or range. The method returns the scale itself, hence why you can chain together several methods, modifying the scale function as you go.

Why don't you need to pass any parameters to yScale when using .attr("height",yScale)?

D3 uses Function.prototype.apply() to pass paramaeters to any function provided to .attr() (or many other methods in D3, such as selection.style() or selection.each()). By using .apply D3 "calls a function with a given this value, and arguments provided as an array". The this value in D3 is generally an individual element, the first parameter, canonnically d, is the datum associated with that element, the 2nd paremeter, cannonically i, is the index of that element, and the last parameter is the group of elements in the selection.

The function passed to .attr() is called for each element in the selection.

The scale function takes one parameter, a value to be scaled. As your datum is a number, we can pass the scale function directly to .attr(): the first parameter passed to it will be the datum.

Carrying forward the above and for reference,

Maps can be iterate over with .entries (and a few other methods):

This is how I am trying to achieve this. Let me know if anything better we can do.

You can try this (there are other ways),

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 likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

You aren't exporting your classes/functions as it is required.

Exporting without default means it's a "named export". You can have multiple named exports in a single file. So if you do this,

You need to create a new React element, set its HTML to your HTML code and render it to the DOM using dangerouslySetInnerHTML.

Example:

You could keep track of a second zoom transform (I'll call this yTransform) and use this to rescale the y axis. As you want the x to zoom normally, you can still use d3.event.transform.rescaleX() to rescale on the X axis, while the yTransform can be used to rescale on the Y axis.

When panning, the y translate value of yTransform should be updated with the current zoom state. Conversely, when zooming, yTransform should be used to override the change in the zoom state's y translate.

Perhaps something like: