d3-tip | d3 tooltipsDevelopment Version : 6kb / ~2kb | Learning library

You can add gridlines to an axis by using axis.tickSize([size]) or axis.tickSizeInner([size]).

Ex:

It's not possible to append a text to a rect element, they're not meant to have children. You can instead just draw another g node, and use the data from the final group of bars. The data contain everything you need - they know the x value of the highest bar, so they know the offset, and they also have the data in their d.data property:

In short, you need to clean up your data.

The long answer:

Your data is inconsistent in its formatting?:

You should have a "sales" number value for each row?

Why do some have what seems to be 2 sub-categories?

Is this just poor formatting using a comma in the sub-category name like "Chairs, Rounded Back"?

As you need to fix this for it to work.

Look at the example I gave you as my answer (https://stackoverflow.com/a/61500248/9792594) to your previous question: https://vizhub.com/Alex-ley/1ebd1b410b994ce1ad4e754bd7ebf89a?edit=files&file=items1%283%29.csv

The .csv file is well formatted:

And note that is has a total_items column. This is required.

I used this VBA code to do your data cleanup (insert placeholder 123 value):

I've made some changes to the last part of your css, changed the content and added a new css shape

Is that what you look for?

Your item counts are strings, so you need to convert them to numbers with parseFloat in order to find the correct maximum value:

Yarn tells you that the npm package find-up is expecting a Node version greater or equal 8. Accordingly to your question you are using Node 6.

End of life for node 6 was on 30 April 2019. Even Node 8 not supported anymore since end of last year.

You should upgrade to a supported version of Node to resolve that issue. Node 10 and 12 are active LTS versions. Node 13 is the current latest release. You could find an overview of Node versions and their support at https://github.com/nodejs/Release.

There are just two things to correct to make it work as expected:

1. Like I mentioned in my answer to your first question on this topic, the key function is executed twice while matching data to DOM elements. To bind data to existing DOM elements you have to use the technique as laid out in Join existing elements of the DOM to data with d3.js. In your case the key function becomes

The issue is that you are applying a fill to the state mesh. Let's change the fill from rgba(0,0,0,0) to rgba(10,10,10,0.1):

It should be clear now why the mouse interaction doesn't work in certain areas: the mesh is filled over top of it. Regardless of the fact you can't see the mesh due to it having 0 opacity, it still intercepts the mouse events.

The mesh is meant only to represent the borders: it is a collection of geojson lineStrings (see here too). The mesh is not intended to be filled, it only should have a stroke.

If you change the mesh fill to none, or the pointer events of the mesh to none, then the map will work as expected.

Change your svg viewBox attribuite to 0 0 550 550.

The first two values are the X and Y coordinates of the upper left corner of the displayed area, the last two are the width and height. viewBox is set only by attribute. How it works

Also check what is preserveAspectRatio values and how they work