Как построить точки (данные) в D3, используя страну, если у меня нет длинного лата - PullRequest
0 голосов
/ 27 сентября 2019

Я использую d3.js в своем проекте angular7 для отображения карты и использую https://datamaps.github.io/ карт данных, которые также используют d3.js.чтобы построить точки (данные), нам нужен длинный лат, но что, если у меня нет длинного широты и у меня есть название страны, то как я могу построить точки (данные) без длинного лат.

bubble_map.bubbles([
      {
        radius: 10,
        centered: 'BRA',
        country: 'USA',
        data: {
          Open: 120,
          Closed: 40,
          Agriculture: 60,
          Water: 34,
          Finance: 10,
          Transportation: 8,
          Other: 4,
        }
      },
      {
        radius: 8,
        country: 'USA',
        centered: 'USA',
        data: {
          Open: 120,
          Closed: 40,
          Agriculture: 60,
          Water: 34,
          Finance: 10,
          Transportation: 8,
          Other: 4,
        }
      },
      {
        radius: 12,
        country: 'USSR',
        latitude: 73.482,
        longitude: 54.5854,
        data: {
          Open: 120,
          Closed: 40,
          Agriculture: 60,
          Water: 34,
          Finance: 10,
          Transportation: 8,
          Other: 4,
        }
      }
    ]}

export class MapComponent implements OnInit {


  constructor() { }

  ngOnInit() {

    let bubble_map = new Datamap({
      element: document.getElementById("container"),
      height: '460',
      scope: 'world',
      geographyConfig: {
        popupOnHover: false,
        dataUrl: null,
        borderColor: '#E5E5E5',
        hideAntarctica: true,
        hideHawaiiAndAlaska: true,
        borderWidth: 1,
        borderOpacity: 1,
        highlightOnHover: true,
        highlightFillColor: '#F2F2F2',
        highlightBorderColor: '#E5E5E5',
        highlightBorderWidth: 1,
        highlightBorderOpacity: 1,
        exitDelay: 100,
        animate: true
      },
      fills: {
        defaultFill: '#F2F2F2'
      },
      bubblesConfig: {
        borderWidth: 4,
        borderOpacity: 1,
        animate: true,
        fillColor: '#fff',
        borderColor: '#632AFF',
        popupOnHover: true,
        highlightFillColor: '#fff',
        highlightBorderColor: '#632AFF',
        highlightBorderWidth: 6,
        exitDelay: 100
      },
      arcConfig: {
        strokeColor: '#DD1C77',
        strokeWidth: 1,
        arcSharpness: 1,
        animationSpeed: 600
      },
      done: function() {},
    });

    // d3.select(window).on('resize', function () {
    //   bubble_map.resize();
    // });

    bubble_map.bubbles([
      {
        radius: 10,
        centered: 'BRA',
        country: 'USA',
        data: {
          Open: 120,
          Closed: 40,
          Agriculture: 60,
          Water: 34,
          Finance: 10,
          Transportation: 8,
          Other: 4,
        }
      },
      {
        radius: 8,
        country: 'USA',
        centered: 'USA',
        data: {
          Open: 120,
          Closed: 40,
          Agriculture: 60,
          Water: 34,
          Finance: 10,
          Transportation: 8,
          Other: 4,
        }
      },
      {
        radius: 12,
        country: 'USSR',
        latitude: 73.482,
        longitude: 54.5854,
        data: {
          Open: 120,
          Closed: 40,
          Agriculture: 60,
          Water: 34,
          Finance: 10,
          Transportation: 8,
          Other: 4,
        }
      }
    ], {
      popupTemplate: function (geo, res) {
        // data = {};
        // let name = res.country;
        let newdata = res.data;
        return `<div class="hoverinfo"
           style="
             background: rgba(255, 255, 255, 0.96);
             border: 1px solid #e5e5e5;
             box-sizing: border-box;
             box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
             border-radius: 10px;
             padding: 8px;
             font-family: Roboto;
             font-style: normal;
             font-weight: normal;
             font-size: 10px;
             line-height: 12px;
             color: #000000;
             float: left;
             cursor: pointer;
           ">
             <div style="
               font-size: 12px;
               font-weight: bold;
               margin-bottom: 4px;
             ">${ res.country }</div>
            <div style="
              float:left;
              margin-right: 15px;
            ">
              <div style="margin-bottom: 2px;">Open : ${newdata.Open}</div>
              <div>Closed : ${newdata.Closed}</div>
            </div>
            <div style="
              float:left
            ">
              <div style="margin-bottom: 2px;">Agriculture: ${newdata.Agriculture}</div>
              <div style="margin-bottom: 2px;">Water: ${newdata.Water}</div>
              <div style="margin-bottom: 2px;">Finance: ${newdata.Finance}</div>
              <div style="margin-bottom: 2px;">Transportation: ${newdata.Transportation}</div>
              <div style="margin-bottom: 2px;">Other: ${newdata.Other}</div>
            </div>
           </div>`
      }
    });

  }

  ngAfterViewInit() {
  }

}
...