Cannot align Choropleth legend Axis with D3

JavaScript
1

Tell us what’s happening:
So I’ve managed to display the colorbar but I cannot manage to align the axis with the colorbar.

I must be doing something wrong and I cannot seem to find where the issue is.

The solution passes all the tests, but I do not want to move on until I understand why the axis is not aligning

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Challenge: Visualize Data with a Choropleth Map

Link to the challenge:

2

Here are the places to adjust:

	const Legend = SVG.append("g")
		.attr("class","key")
		.attr("id","legend")
  	.attr('transform', 'translate(0,40)');

This transform moves the whole legend, rects and ticks.

	Legend.selectAll("rect")
		...
		.attr("x", d => colorScale(d[0])+220+'px')

This moves the rects right 220 plus their scale location, but doesn’t affect the ticks or legend placement.

	Legend.append('g')
		.attr('class', 'caption')
		.attr('x', colorScale.range())
		.attr('y', 5+'px')
		.attr('fill', '#fff')
		.attr('text-anchor', 'start')
		.attr('font-weight', 'bold')
		.call(xAxis);

This doesn’t have a transform and is measured relative to the legend, which still starts at the left side of the ticks despite you moving the rects earlier.

3

Thank you my friend you have opened my eyes :slight_smile:

Happy coding !

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.