标签: datamaps

如何获取d3.js数据映射支持的所有国家/地区的列表？

按照datamaps演示页面中的示例,我将此配置用于我的地图:

var basic = new Datamap({
  element: document.getElementById("basic")
  fills: {
    defaultFill: "#ABDDA4",
    authorHasTraveledTo: "#fa0fa0"
  },
  data: {
    USA: { fillKey: "authorHasTraveledTo" },
    JPN: { fillKey: "authorHasTraveledTo" },
    ITA: { fillKey: "authorHasTraveledTo" },
    CRI: { fillKey: "authorHasTraveledTo" },
    KOR: { fillKey: "authorHasTraveledTo" },
    DEU: { fillKey: "authorHasTraveledTo" },
  }
});

如何获取数据图中包含的所有国家/地区的列表(除了"USA","JPN","ITA"等)？

例如,我想通过gps coords(lat,lng)将自定义html对象添加到wold地图中 - 就像用css或任何其他(js？)标记动画完成的脉动点一样

<style>

#circle {
    background: red;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;

}

.gps_ring {
    border: 3px solid red;
    -webkit-border-radius: 30px;
    height: 18px;
    width: 18px;

    left:20px;
    top:214px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
</style>

<div id="state" class="grid_4 alpha">
    <div class="gps_ring"></div>

</div>

我目前正在 ReactJS 项目中使用react-typescript-datamaps 库，并在自定义地图上显示的国家/地区名称的字体样式和大小方面面临挑战。尽管付出了努力，我仍然无法找到合适的方法来进行必要的改变。

这是相关组件的示例：

import React, { useEffect, useState } from "react";
import { DataMapsWrapper } from "react-typescript-datamaps";
import { useDispatch, useSelector } from "react-redux";
import AttackHelper from "./AttackHelper";
import BlastHelper from "./BlastHelper";

import BubblesConfig from "./BubblesConfig";
import {  getThreatsMapData } from "../store/dataSlice";


const MapView = () => {
  const dispatch = useDispatch();
  const [index, setIndex] = useState(0);
  const [dstloc, setDstloc] = useState();
  const [srcloc, setSrcloc] = useState();
  const [arc, setArc] = useState([]);
  const [blast, setBlast] = useState([]);

  const …

我正在关注datamaps文档,我正在尝试将onClick监听器设置为我在svg上呈现的气泡.现在,svg div具有以下子标记:

<svg>
  <g id class="datamaps-subunits">..</g>
  <g id class="bubbles">..</g>
</svg>

文件说,对于地图上列出的国家,这应该按照以下方式完成:

done: function(datamap) {
            datamap.svg.selectAll('.datamaps-subunits').on('click', function() {
              alert("hello");  
            });
        }

这样可以正常工作,同时尝试点击地图上的特定区域.

试图将相同的侦听器附加到bubbles类没有任何作用.

done: function(datamap) {
            datamap.svg.selectAll('.bubbles').on('click', function() {
                alert("hello"); 
            });
        }

所以我基本上使用来自 Datamaps 示例网站的默认气泡图。

var bubble_map = new Datamap({
  element: document.getElementById("bubbles"),
  geographyConfig: {
    popupOnHover: false,
    highlightOnHover: false
  },
  fills: {
    defaultFill: '#ABDDA4',
    USA: 'blue',
    RUS: 'red'
  }
});
bubble_map.bubbles([
  {
    name: 'Not a bomb, but centered on Brazil',
    radius: 23,
    centered: 'BRA',
    country: 'USA',
    yeild: 0,
    fillKey: 'USA',
    date: '1954-03-01'
  },
  {
    name: 'Not a bomb',
    radius: 15,
    yeild: 0,
    country: 'USA',
    centered: 'USA',
    date: '1986-06-05',
    significance: 'Centered on US',
    fillKey: 'USA'
  },
  {
    name: 'Castle Bravo',
    radius: 25,
    yeild: 15000, …

我有一个带有图钉标记的D3.js Datamaps.js映射，我一直在尝试实现缩放。

http://jsbin.com/xoferi/edit?html，输出

图像图钉标记为20x20，图钉标记的点（在x + 10，y + 20处）在所选的经度/纬度点上方。

缩放地图时出现问题，图像从其相对位置漂移。例如：看一看冰岛别针。放大时，它向上和向左漂移。

在缩放和单击地图时，如何保持销钉的大小相同且相对位置相同？

我在寻找其他示例，但是我不确定自己缺少什么。也许需要将视口大小添加到计算方法中。或者，可能需要将图钉标记的来源更改为默认值。我不确定。

参考：带有标记的d3美国州地图，缩放变换问题

我们正试图在目前用 angularjs 编写的项目中引入 clojurescript。我们正在使用一个外部 javascript 库 - datamaps。我们使用 :foreign-libs 编译器选项以下列方式获取依赖文件：

 :compiler {:output-to "resources/public/js/testable.js"                                                                       
                              :main "gofigure.test-runner"                                                                                       
                              :foreign-libs [{:file "globe.js"                                                                                   
                                              :provides ["globe"]}                                                                               
                                             {:file "datamaps/src/js/datamaps.js"                                                                
                                              :provides ["datamaps"]}                                                                            
                                             {:file "d3/d3.js"                                                                                   
                                              :provides ["d3"]}                                                                                  
                                             {:file "topojson/topojson.js"                                                                       
                                              :provides ["topojson"]}}}

我们正面临一个错误：“无法读取未定义的属性‘世界’”

我们将此问题缩小到 datamaps 文件中的一个问题，我们认为这是因为在 foreign-libs 选项中我们提到了特定的 datamaps.js 文件，但我们遗漏了 datamaps 文件夹中的其他文件，因此没有准确编译整个库。

有没有办法将整个库作为依赖项而不仅仅是单个文件？

我使用全局地图DataMaps.js.当鼠标滚轮移动时,我想实现鼠标缩放.有一个静态缩放的例子:

var zoom = new Datamap({
  element: document.getElementById("zoom_map"),
  scope: 'world',
  // Zoom in on Africa
  setProjection: function(element) {
    var projection = d3.geo.equirectangular()
      .center([23, -3])
      .rotate([4.4, 0])
      .scale(400)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var path = d3.geo.path()
      .projection(projection);

    return {path: path, projection: projection};
  }
});

另外,我有事件鼠标滚轮:

$('#zoom_map').bind('DOMMouseScroll mousewheel', function(e){
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
        console.log("+");
        e.preventDefault();
    }
    else{
        console.log("-");
        e.preventDefault();
    }
});

我试图连接这些部分.此外,我试图更改datamaps.js.但是,不幸的是,我失败了.

我正在使用Datamaps创建加拿大和美国的地图.我在其网站上看到了教程和/或示例,我看到了"仅限美国地图"的示例.我这样做了:

    <script>
        var addUSA = new Datamap({
            scope: 'usa',
            element: document.getElementById('usa-map'),
            geographyConfig: {
                highlightOnHover: false,
                borderColor: '#006298',
                borderWidth: 0.8,
                popupTemplate: function(geography, data) {
                    return "<div class='hoverinfo'><strong>" + data.info + "</strong></div>";
                }
            },
            dataUrl: 'data.json',
            dataType: 'json',
            data: {},
            fills: {
                defaultFill: '#FFFFFF'
            }
        });
        addUSA.labels();
    </script>

所以我假设你也可以创建一个"加拿大地图".但问题是,我不知道如何将两个国家结合起来.

我的目标是标签,hover-info和json,这就是我使用Datamaps的原因.

我在尝试创建地图时收到此错误:

我目前正在使用的版本,"datamaps": "^0.5.8",这是直接来自我的package.json.我还检查了package.json实际的包,看看main指向的位置:

javascript import d3.js angularjs datamaps