You are viewing a plain text version of this content. The canonical link for it is here.

Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/04/26 07:59:40 UTC

[GitHub] [echarts] pissang opened a new issue #14796: Map may have duplicate labels when emphasis and can't trigger click event in 5.1.1

pissang opened a new issue #14796:
URL: https://github.com/apache/echarts/issues/14796


   ### Version
   5.1.1-rc.1
   
   ### Reproduction link
   [http://pissang.github.io/starbucks/](http://pissang.github.io/starbucks/)
   
   ### Steps to reproduce
   Hover USA.
   
   ### What is expected?
   1. Map labels are correct when emphasized
   2. Map can trigger click event
   
   ### What is actually happening?
   1. Map have duplicate labels when emphasis
   2. Map don't trigger click event
   
   ![image](https://user-images.githubusercontent.com/841551/116048985-5e323f80-a6a8-11eb-8ff4-77b8b7a0585e.png)
   
   
   <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
   <!-- This issue is in English. DO NOT REMOVE -->


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org

[GitHub] [echarts] 100pah edited a comment on issue #14796: Map may have duplicate labels when emphasis and can't trigger click event in 5.1.1

Posted by GitBox <gi...@apache.org>.

100pah edited a comment on issue #14796:
URL: https://github.com/apache/echarts/issues/14796#issuecomment-843375935

I am not find a solution yet. But I try to explain what I found first.

# The facts

## One country multiple labels
In the original geoJSON 'world', some countries have several territories. For example, USA and France:

![image](https://user-images.githubusercontent.com/1956569/118694274-7d9f3100-b83e-11eb-9289-184838c39f55.png)

Those territories are described by different `features` items with the same name in GeoJSON. For example:
```js
{
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'geometry': { 'type': 'Polygon', 'coordinates': [...]},
'properties': {
'name': 'United States of America', 'childNum': 1
}
}, {
'type': 'Feature',
'geometry': { 'type': 'Polygon', 'coordinates': [...]},
'properties': {
'name': 'United States of America', 'childNum': 1
}
}]
}
```

And in some case, a `features` item contains more than on territories (See France in the picture above).

Each `features` item will be built to a `region` instance and have a label.
So USA have two labels displayed in the `'world'` GeoJSON.

And there is an ancient [trick](https://github.com/apache/echarts/blob/5.1.1/src/coord/geo/fix/geoCoord.ts) to move both of the labels to the same coords (overlap to look like there is only one label). Without that trick, users can also set `lat`/`lng` of label in
```js
'properties': {
name: 'France',
cp: [123, 456]
}
```
If both of the those methods are not applied, the label will be displayed in the center of the bounding rect of the region.
But for some region that contain more than one territories (see France case in the picture above), the center of the bounding rect is in Africa, which is not an appropriate place to display the label `112`.

## Layout label by percentage based on rect

Since 5.1.0, the map label layout is changed to based on the percentage based on the bounding rect of the region.
See [code](https://github.com/apache/echarts/blob/5.1.1/src/component/helper/MapDraw.ts#L727).

In most cases that is OK. But for the label in the case above, where a label of an USA island is moved far far from the original island, we got a big percent value. And the hover style has different `borderWidth` from the normal style (even only different between 0.5 to 0), thus the bounding rect on hover is different from the bounding rect in normal style (even only 0.5 pixel different). Then the big percent value multiple the different bounding rect cause that the label "fly" when hovering on USA.

# Possible solution

+ Perhaps we can make a new config in `textConfig`, for example `textConfig.positionWithoutStroke`, to make the `textConfig.position` be able to based on the bounding rect without stroke (to make the bounding rect of emphasis state the same as that in normal state)
+ Provide an approach to make some region display label but some region with the same name do not display label. (like the island in USA above)

--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org

[GitHub] [echarts] 100pah closed issue #14796: Map may have duplicate labels when emphasis and can't trigger click event in 5.1.1

Posted by GitBox <gi...@apache.org>.

100pah closed issue #14796:
URL: https://github.com/apache/echarts/issues/14796


   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org

[GitHub] [echarts] 100pah edited a comment on issue #14796: Map may have duplicate labels when emphasis and can't trigger click event in 5.1.1

Posted by GitBox <gi...@apache.org>.

100pah edited a comment on issue #14796:
URL: https://github.com/apache/echarts/issues/14796#issuecomment-843375935


   I am not find a solution yet. But I try to explain what I found first.
   
   # The facts
   
   ## One country multiple labels (Since maybe echarts3)
   In the original geoJSON 'world', some countries have several territories. For example, USA and France:
   
   ![image](https://user-images.githubusercontent.com/1956569/118694274-7d9f3100-b83e-11eb-9289-184838c39f55.png)
   
    
   Those territories are described by different `features` items with the same name in GeoJSON. For example: 
   ```js
   {
       'type': 'FeatureCollection',
       'features': [{
           'type': 'Feature',
           'geometry': { 'type': 'Polygon', 'coordinates': [...]},
           'properties': {
               'name': 'United States of America', 'childNum': 1
           }
       }, {
           'type': 'Feature',
           'geometry': { 'type': 'Polygon', 'coordinates': [...]},
           'properties': {
               'name': 'United States of America', 'childNum': 1
           }
       }]
   }
   ```
   
   And in some case, a `features` item contains more than on territories (See France in the picture above).
   
   Each `features` item will be built to a `region` instance and have a label.
   So USA have two labels displayed in the `'world'` GeoJSON.
   
   And there is an ancient [trick](https://github.com/apache/echarts/blob/5.1.1/src/coord/geo/fix/geoCoord.ts) to move both of the labels to the same coords (overlap to look like there is only one label). Without that trick, users can also set `lat`/`lng` of label in 
   ```js
      'properties': {
          name: 'France',
          cp: [123, 456]
      }
   ```
   If both of the those methods are not applied, the label will be displayed in the center of the bounding rect of the region.
   But for some region that contain more than one territories (see France case in the picture above), the center of the bounding rect is in Africa, which is not an appropriate place to display the label `112`.
   
   
   ## Layout label by percentage based on rect (Since `v5.1.0`)
   
   Since 5.1.0, the map label layout is changed to based on the percentage based on the bounding rect of the region.
   See [code](https://github.com/apache/echarts/blob/5.1.1/src/component/helper/MapDraw.ts#L727).
   
   In most cases that is OK. But for the label in the case above, where a label of an USA island is moved far far from the original island, we got a big percent value. And the hover style has different `borderWidth` from the normal style (even only different between 0.5 to 0), thus the bounding rect on hover is different from the bounding rect in normal style (even only 0.5 pixel different). Then the big percent value multiple the different bounding rect cause that the label "fly" when hovering on USA.
   
   
   # Possible solution
   
   + Perhaps we can make a new config in `textConfig`, for example `textConfig.positionWithoutStroke`, to make the `textConfig.position` be able to based on the bounding rect without stroke (to make the bounding rect of emphasis state the same as that in normal state)
   + Provide an approach to make some region display label but some region with the same name do not display label. (like the island in USA above)
   
   <br>
   
    Another [test case](https://github.com/apache/echarts/blob/fix/geo-label/test/geo-label.html)


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org

[GitHub] [echarts] 100pah commented on issue #14796: Map may have duplicate labels when emphasis and can't trigger click event in 5.1.1

Posted by GitBox <gi...@apache.org>.

100pah commented on issue #14796:
URL: https://github.com/apache/echarts/issues/14796#issuecomment-843375935

I am not find a solution yet. But I try to explain what I found first.

# The facts

## One country multiple labels
In the original geoJSON 'world', some countries have several territories. For example, USA and France:

![image](https://user-images.githubusercontent.com/1956569/118694274-7d9f3100-b83e-11eb-9289-184838c39f55.png)

And in some case, a `features` item contains more than on territories (See France in the picture above).

Each `features` item will be built to a `region` instance and have a label.
So USA have two labels displayed in the `'world'` GeoJSON.

## Layout label by percentage based on rect

## Possible solution

--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org