0

Based on the code here(http://zeroviscosity.com/d3-js-step-by-step/step-3-adding-a-legend), I have created a horizontal legend..

code below..jsfiddle

     (function(d3) {
        'use strict';

        var dataset = [{
            "colorName":"red",
            "hexValue":"#f00"
        },
        {
            "colorName":"green",
            "hexValue":"#0f0"
        },
        {
            "colorName":"blue",
            "hexValue":"#00f"
        },
        {
            "colorName":"cyan",
            "hexValue":"#0ff"
        },
        {
            "colorName":"magenta",
            "hexValue":"#f0f"
        },
        {
            "colorName":"yellow",
            "hexValue":"#ff0"
        },
        {
            "colorName":"black",
            "hexValue":"#000"
        }
    ]

        var width = 360;
        var height = 360;
        var legendRectSize = 18;                                  // NEW
        var legendSpacing = 4;                                    // NEW


        var svg = d3.select('#chart')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
          .append('g');


        var legend = svg.selectAll('.legend')                     // NEW
          .data(dataset)                                   // NEW
          .enter()                                                // NEW
          .append('g')                                            // NEW
          .attr('class', 'legend')                                // NEW
          .attr('transform', function(d, i) {                     // NEW
                    //  var height = 0;          // NEW
           var horz = 100*i;                       // NEW
            var vert = 6;                        // NEW
            return 'translate(' + horz + ',' + vert + ')';        // NEW
          });                                                     // NEW

        legend.append('rect')                                     // NEW
          .attr('width', legendRectSize)                          // NEW
          .attr('height', legendRectSize)                         // NEW
          .style('fill', function (d, i) {
      return d.hexValue;
  })                                  // NEW
          .style('stroke', function (d, i) {
      return d.hexValue;
  });                                // NEW

        legend.append('text')                                     // NEW
          .attr('x', legendRectSize + legendSpacing)              // NEW
          .attr('y', legendRectSize - legendSpacing)              // NEW
          .text(function(d) {return d.colorName; });                       // NEW

      })(window.d3);

But it gets cut off on the right size. How can I ensure that it goes to the next line if the width available is less than legend width.

Also, I have viewed this question (How to create a horizontal legend with d3.js) but was unable to figure how to use the same in my case. It would be great if someone could show me how to ensure not to hard code width (colorbox + text) as in my code.

Community
  • 1
  • 1
Arnab
  • 2,324
  • 6
  • 36
  • 60

1 Answers1

3

Add the following if inside your translate function

       .attr('transform', function(d, i) {                   
           var horz = 100*i;                       // NEW
           var vert = 6;    
           if (horz >= width) {
              horz = 100 * (i - 4);
              vert = 40;
            }

         return 'translate(' + horz + ',' + vert + ')';        // NEW
      });

This should solve your current issue however you should do it more automated in terms that if you have a legend that need to be 3 rows this may not work for you.

Hope this helps.

Alex
  • 66
  • 3