JSFiddle - React, Tailwind, and code Playground

HTML

<div class="legend-div">

</div>

JavaScript

var legendVals = ["Queens", "Kings", "Bronx", "Manhatan","Richmond"] ;
var color = d3.scale.category10()

 
var legend = d3.select(".legend-div")
	.append("svg")
  .attr("width", 500)
  .attr("height", 50)
  .selectAll('g')
	.data(legendVals)
	.enter()
  .append('g')
	.attr("class", "legends")
	;

legend.append('rect') // 凡例の色付け四角
	.attr("x", 0)
	.attr("y", 10)
	.attr("width", 10)
	.attr("height", 10)
	.style("fill", function (d, i) { return color(i); }) // 色付け

legend.append('text')  // 凡例の文言
	.attr("x", 20)
	.attr("y", 20)
	.text(function (d, i) {	return d ; })
	.attr("class", "textselected")
	.style("text-anchor", "start")
	.style("font-size", 15)
  ;
  
var padding = 20 ;  
legend.attr("transform", function (d, i) {
          {
            return "translate("+(d3.sum(legendVals, function(e,j) {
    					if (j < i) { 
              	return legend[0][j].getBBox().width; 
              } else {
              	return 0; 
                } 
              }) + padding * i) + ",0)";
          }
			});