Is there a way to use “fill” AND “stroke” as attri

2019-07-23 14:27发布

问题:

I'm using jVectorMap v1.1 and I've got this relevant piece of code:

var america = "#d84148";
var europe = "#0060d0";
var africa = "#44984d";
var asia = "#e3a430";
var oceania = "#2ecdd0";

series: {
    regions: [{
        values: data['colours'],
        scale: {
            "America" : america,
            "Europe" : europe,
            "Africa" : africa,
            "Asia" : asia,
            "Oceania" : oceania
        },
        normalizeFunction: 'linear',
        attribute: 'fill'
    }]
}

The vector data I got is the world_mill_en from naturalearth.com and it contains a 1px separation for each country, that act as that country's borders. The application I'm building must show the continents as a whole, therefore no borders are allowed.

On attribute I can only set fill or stroke as parameters, and I can set a solid color for the borders while using fill.

I would like to know if it's possible to use fill AND stroke at the same time as attribute. Or if there's a way of setting the region's stroke to have the same color as it's respective region. ie.

if (stroke == "none") 
{
    stroke = "that region's colour"
}

回答1:

After searching through various examples, I came across my solution at this link:

https://github.com/bjornd/jvectormap/blob/master/tests/markers.html

All I needed to do was:

var america = "#d84148";
var europe = "#0060d0";
var africa = "#44984d";
var asia = "#e3a430";
var oceania = "#2ecdd0";

series: {
    regions: [{
        values: data['colours'],
        scale: {
            "America" : america,
            "Europe" : europe,
            "Africa" : africa,
            "Asia" : asia,
            "Oceania" : oceania
        },
        normalizeFunction: 'linear',
        attribute: 'fill'
    }, {
        values: data['colours'],
        scale: {
            "America" : america,
            "Europe" : europe,
            "Africa" : africa,
            "Asia" : asia,
            "Oceania" : oceania
        },
        normalizeFunction: 'linear',
        attribute: 'stroke'
    }]
}

So that's it, problem solved. Replicate the whole section inside region array, including curly brackets, changing the fill to stroke.