javascript - D3 choropleth map with legend -

The combined population is showing me that there is a small map of the total population. I want to add a legend to the map showing the quantitative values. I have seen other similar questions about this subject but for my specific case it may not seem to work. I know that I need to include color range or color domain but it is not certain that this is the right way. As of now, only one characteristic appears in the legend, can it be that the characteristics of all the legends are placed on top of each other, how can I definitely know and how can I fix it.

  // Define default alienation scheme var colorchemeselect = "greens"; Var colorScheme = colorbrewer [colorSchemeSelect]; // Defines the default number of definitions var volume = 5; // To define the data value in the colors of the colors of the characters, define a static scale color color = D3. Scale.cttill (.) Rangage (ColorSm [volume]); D3.csv (data, function (data) {color.domain ([d3.min (data, function (d) {return d.value;}), d 3.mx (data, function (d return d.value) )]; // Legend Verge Legend = SVG.Sultalt ('Rect'). Data (color.domain) .reverse ()) .enter () .append ('rect') .ttt ("x", width - (740) .attr ("y", function (d, i) {return i * 20;}) .attr ("width", 10) .attr ("height", 10) style ("fill", color );  

If you are using, then the legend is very well The successive scale , where the domain is made up of discrete values, which relate to the range of colors on each one basis. But you can use the quantity scale , And therefore a different approach is needed.

For one, the domain is a list of all possible input values, and the range is a list of discrete output values. Domaine N list sort in ascending order And then the same-shaped groups Switch to the split, which has been assigned to each output value range. The number of groups is determined by the number of output values.

In order to get a legend entry for each color, you do not have the domain as the category of your color scale, the data for your narrative, keeping in mind After that you can use the method to find the minimum and maximum input values ​​that are being prepared with that color.

Sample code, enter each legend entry into a & lt; G & gt; A color rectangle and a text label showing this value.

  var legend = svg.selectAll ('g.legendEntry') .data (color.range) .reverse ()) .enter () .append ('g'). Attr ('Class', 'Legend Entry'); ("Width", 10). ("X", width - 780) .attr ("y", function (d, i) {return i * 20;}) .attr ("width", 10). Style ("height", 10). Style ("stroke", "black"). Style ("stroke-width", 1). Style ("fill", function (d) {return d;}); // Data Objects are the stories of Phil colors. Append ('text') .attr ("x", width - 765) // 5 pixel space & lt; Rect & gt; .attr ("y", function (d, i) {return i * 20;}) .attr ("dy", "0.8 m") // place one line * bottom * x, y point .text (function D, I) {var hasen = color.invertExtent (d); // will be a two element array, you want it to format: var format = d3.format ("0.2f"); return format (+ extent [0]) + "-" + format (+ extent [1]);});