Question

根据此处的代码（http://zeroviscosity.com/d3-js-step-by-step/step-3-adding-a-legend），我创建了一个水平传奇..

以下代码.. 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);

但它的尺寸合适。如果可用宽度小于图例宽度，我该如何确保它进入下一行。

另外，我已经查看了这个问题（How to create a horizontal legend with d3.js），但在我的案例中无法确定如何使用相同的问题。如果有人能告诉我如何确保不像我的代码那样硬编码宽度（彩盒+文本），那就太棒了。

Answer 1

如果在翻译功能中添加以下内容

       .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
      });

这应该可以解决您当前的问题，但是如果您有一个需要3行的图例，那么您应该更加自动化，这可能不适合您。

希望这有帮助。

使用d3的水平图例在右侧被截断

1 个答案: