var city = ["New York", "San Francisco", "Los Angeles"]; var colors = ["#FF0000", "#009933" , "#0000FF"]; var c10 = d3.scale.category10(); var colorScale = d3.scaleOrdinal(d3.schemeDark2); console.log(c10.range()); var color_scale = d3.scaleOrdinal() .domain( city ) .range(colors) ; var svg = d3.select(".content-div") .append("svg") .selectAll( "rect" ) .data(city) .enter() ; svg.append("rect") .attr("x", 20) .attr("y", function(d,i){ return i*20+10 ; }) .attr("width", 10) .attr("height", 10) .attr("fill", function(d,i){ return color_scale(d) } ) ; svg.append("text") .attr("x", 35) .attr("y", function(d,i){ return i*20+20 ; }) .text( function(d,i){ return city[i] ; } ) ;
<script src="https://d3js.org/d3.v4.min.js"></script> <div class="content-div"> </div>