JSFiddle - React, Tailwind, and code Playground

by tiger

HTML

<div class="legend-div"></div>

JavaScript

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

var svgLegned = d3.select(".legend-div")
		.append("svg")
    .attr("transform", "translate(20,20)");
  
var legend = svgLegned.selectAll('.legends')
	.data(legendVals)
	.enter()
  .append('g')
	.attr("class", "legends")
	.attr("transform", function (d, i) {
          {
            return "translate(0," + i * 20 + ")" // y方向に20px間隔で移動
          }
			});

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

legend.append('text')  // 凡例の文言
	.attr("x", 20)
	.attr("y", 10)
//.attr("dy", ".35em")
.text(function (d, i) {	return d ; })
	.attr("class", "textselected")
	.style("text-anchor", "start")
	.style("font-size", 15)
  ;