jVectormap渐变背景填充

Question

在jVectormap插件中，有没有办法用渐变背景填充地图？

我通过执行此代码进行了尝试，但是它只显示了纯黑色。

fillColor: {
      linearGradient: {
            stops: [
                 [0, 'rgba(255,255,255,0.5)'],
                 [1, 'rgba(255,255,255,0.0)'],
            ]
      }
},

Answer 1

如果您不想使用d3.js，则可以使用我创建的将渐变设置为svg的功能

function createGradient(svg, id, stops) {
  var svgNS = svg.namespaceURI;
  var grad = document.createElementNS(svgNS, 'linearGradient');
  grad.setAttribute('gradientUnits', 'userSpaceOnUse');
  grad.setAttribute("x1", "0%");
  grad.setAttribute("x2", "0%");
  grad.setAttribute("y1", "0%");
  grad.setAttribute("y2", "100%");
  grad.setAttribute('id', id);

  for (var i = 0; i < stops.length; i++) {
      var attrs = stops[i];
      var stop = document.createElementNS(svgNS, 'stop');
      for (var attr in attrs) {
          if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr, attrs[attr]);
      }
      grad.appendChild(stop);
  }

  var defs = svg.querySelector('defs') || svg.insertBefore(document.createElementNS(svgNS, 'defs'), svg.firstChild);
  return defs.appendChild(grad);
};


function initializeMapColors() {
  createGradient($('svg')[0], 'MyGradient', [{
    offset: '0%',
    'stop-color': '#D96B6C'
  }, {
    offset: '100%',
    'stop-color': '#E35980'
  }]);

  $('path').attr('fill', 'url(#MyGradient)');
};

initializeMapColors();

Answer 2

您可以将渐变元素添加到地图的<defs>元素，然后将fill属性链接到其id。 要添加渐变，您可以使用3d.js库

初始化地图并设置fill属性

$(function () {
    $('#map').vectorMap({
        map: 'world_mill_en',
        regionStyle: {
            initial: {
                fill:  'url(#my-gradient)'
            },
        }
    });
});

使用d3.js添加渐变定义

$(function () {
    var defs = d3.select('defs');
    var myGradient = defs.append('linearGradient')
        .attr('id', 'my-gradient')
        .attr('x1', '0%')
        .attr('y1', '100%')
        .attr('x2', '100%')
        .attr('y2', '0%');
    myGradient.append('stop')
        .attr('offset', '0%')
        .attr('style', 'stop-color:rgb(255,255,255)')
        .attr('stop-opacity', 1);
    myGradient.append('stop')
        .attr('offset', '100%')
        .attr('style', 'stop-color:rgb(51,51,51)')
        .attr('stop-opacity', 1);
});