d3-legend | A reusable d3 legend component | Data Visualization library

You're right, every time the shapes are drawn, the following code is executed:

The result of .enter() is a selection that has corresponding datum values, but does not have any nodes related to it. That is why we normally only merge at the very last moment, after having called .append("g").

If you look at the same example, you'll see that she's setting the stroke using a

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):

A few minor things were missing/incorrect:

1. The group () containing the bars was being transformed incorrectly (I'm guessing you missed this while changing from vertical stacked to horizontal) i.e. the following line

Here's your options:

• Use a forigenObject svg node to insert your html slider but this is poorly supported under IE.
• Remove the title from your svg make it html.
• Create an svg slider like here.

One solution would to be to simply put position:relative;top:15px; in the span tag.

Although it should be used sparingly in situations like this as it can easly overlap with other elements in your code forcing you to change z-index layer.

Here's the code:

Two things you need to do:

1. The class grid is missing from the axis. So add the class:

Okay. So here's a code snippet with a simple jQuery slider (as I suggested in the comments) that filters out data for the last 24 months. To show the initial data i.e. for the original data, the slider has to be set to 0 (couldn't find any other way to do that). You can play around with the slider code.