Question

设置：我正在构建一个Globe应用程序，以更好地形象地表示世界各地区的数据。它是使用topojson构建d3.js来构建几何图形的。

我目前正在执行ivyywang here所实现的拖动。（除非您处于状态：“数学书呆子大师”，否则不要迷失在数学函数中）

我的项目当前为here。

问题：我对地球仪进行了正交投影，并成功实现了拖动功能...除外。只要光标位于某个国家/地区的范围内，我就只能单击并拖动地球。如何投影我的SVG，以便整个画布响应我的拖动事件？

相关代码：

首先，我从MySQL请求中获取一些数据并将其存储在countryStattistics中。然后通过以下函数运行它，以更好地对其进行索引。

var countryStatistics = (returned from mySQL query)

  //this function build dataById[] setting data keyed to idTopo
function keyIdToData(d){
  countryStatistics.forEach(function(d) {
    dataById[d.idTopo] = d;
  });  
}    

 function visualize(statisticalData, mapType){
  //pass arguments each function call to decide what data to viasually display, and what map type to use

var margin = {top: 100, left: 100, right: 100, bottom:100},
    height = 800 - margin.top - margin.bottom, 
    width = 1200 - margin.left - margin.right;

  //a simple color scale to correlate to data
var colorScale = d3.scaleLinear()
  .domain([0, 100])
  .range(["#646464", "#ffff00"])


 //create svg
var svg = d3.select("#map")
      .append("svg")
      .attr("height", height + margin.top + margin.bottom)
      .attr("width", width + margin.left + margin.right)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        //here I attmpt to fill the svg with a different color.  but it is unresponsive
      .attr("fill", "blue")

如您在代码块末尾所见，我在SVG元素上调用.attr（“ fill” ...，但无法获得要呈现的颜色。也许这与为什么我的光标没有响应这个空间。

继续...

  //set projection type to 2D map or 3d globe dependinding on argument passed see function below
var projection = setMapType(mapType, width, height);

      //a function to call on visualize() to set projection type for map style.
function setMapType(mapType, width, height) {
  if(mapType === "mercator") {
    let projection = d3.geoMercator()
    .translate([ width / 2, height / 2 ])
    .scale(180)
    return projection;
  }else if (mapType === "orthographic"){
    let projection = d3.geoOrthographic()
    .clipAngle(90)
    .scale(240);
    return projection;
  }

  //pass path lines to projections
var path = d3.geoPath()
  .projection(projection);

  //here I create and call the drag function only when globe projection is displayed elected
if(mapType == "orthographic"){
  var drag = d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged);
    svg.call(drag);
}


  //coordinate variables
var gpos0, 
    o0;

function dragstarted(){
  gpos0 = projection.invert(d3.mouse(this));
  o0 = projection.rotate();  
}

function dragged(){
  var gpos1 = projection.invert(d3.mouse(this));
  o0 = projection.rotate();

  var o1 = eulerAngles(gpos0, gpos1, o0);
  projection.rotate(o1);

  svg.selectAll("path").attr("d", path);
}

  //load in the topojson file
d3.queue()
  .defer(d3.json, "world110m.json")
  .await(ready)

以上功能是指计算正交旋转所需的数学功能。您可以在顶部的第一个链接中的ivyywang在代码块中看到它们。

function ready (error, data){
    if (error) throw error;
    //output data to see what is happening
  console.log("topojson data: ")
  console.log(data);

    //I suspect there may be an issue with this code. 
  countries = topojson.feature(data, data.objects.countries)
    //bind dataById data into countries topojson variable
  .features.map(function(d) {
    d.properties = dataById[d.id];
    return d
  });

  console.log("countries:")
  console.log(countries)

我怀疑上面的国家/地区变量可能是罪魁祸首，主要是因为我不完全理解此代码。在此变量中，我将由keyIdToData()处理的countryStatistics数据与我的topojson数据绑定为嵌套对象“属性”。我将其记录下来以查看数据。

  svg.selectAll(".country")
    .data(countries)
    .enter().append("path")
    .attr("class", "country")
    .attr("d", path)

    //make fill gradient depend on data
    .attr("fill", function(countries){
        //if no data, country is grey
      if(countries.properties == undefined){
        return "rgb(100 100 100)";
      }
        //else pass data to colorScale()
      return colorScale(countries.properties.literacy)
    })
    .on('mouseover', function(d) {
        //on hover set class hovered which simply changes color with a transition time
      d3.select(this).classed("hovered", true)
    })
    .on('mouseout', function(d) {
      d3.select(this).classed("hovered", false)
    })
  }
};

最后我们有了这个小功能

  //this function build dataById[] setting data keyed to idTopo
function keyIdToData(d){
  countryStatistics.forEach(function(d) {
    dataById[d.idTopo] = d;
  });  
}

可能性：：似乎我的SVG渲染排除了我的空白（非国家/地区）区域。我的SVG构造可能有问题吗？还是当我更改数据并将dataById附加到我的topojson中时，我正在干扰SVG的构造？

感谢您将它作为键盘忍者。有什么想法吗？

Answer 1

问题

您的鼠标交互仅在父g内绘制路径的位置，而不是在它们之间的空间。您应用于g的填充会被应用于子路径的样式所覆盖。

查看您所拥有的内容，变量svg包含一个g：

//create svg
var svg = d3.select("#map")
  .append("svg")
  ...
  .append("g")  // return a newly created and selected g
  ...
  .attr("fill", "blue") // returns same g

对于鼠标交互，g仅可与其中存在元素的地方进行交互。对于g，fill属性不会直接做任何事情，它仅应用于表示元素（和动画）：

作为演示文稿属性，它[填充]可以应用于任何元素，但是它仅对以下11个元素有效：<altGlyph>， <circle>，<ellipse>，<path>，<polygon>，<polyline>，<rect>，<text>， <textPath>，<tref>和<tspan>（MDN）

在fill上使用g是为子元素，即路径着色。尽管您直接为它们着色，所以蓝色没有视觉效果：

var g = d3.select("body")
  .append("svg")
  .append("g")
  .attr("fill","orange");
  
// Inherit fill:
g.append("rect")
  .attr("width",50)
  .attr("height",50)
  
// Override inheritable fill:
g.append("rect")
  .attr("x", 100)
  .attr("width",50)
  .attr("height",50)
  .attr("fill","steelblue");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

解决方案

您需要创建一个与之交互的元素，以将其拖动到当前没有路径的地方。

现在，我认为您不希望将整个svg背景设置为蓝色，而只是将地球上不属于某个国家的部分设置为蓝色。您可以使用geojson球体执行此操作。从技术上讲，d3并不是geojson规范的一部分，但它识别出shere类型的geojson覆盖了整个星球（因此，它不需要任何坐标）。在将国家/地区添加到地球之前，添加一个球体，这为拖动事件提供了与之交互的元素：

svg.append("path")
  .attr("d", path({type:"Sphere"})
  .attr("fill","blue");

这充满了海洋（和陆地），我们可以在上面附加国家。现在，由于球体和国家都属于同一g的一部分，因此我们可以像现在一样在整个地球上进行拖动，但是现在没有孔可以进行鼠标交互了。

这是一个具有正交投影和最基本的拖动功能的快速演示：

var svg = d3.select("svg").append("g");

var projection = d3.geoOrthographic()
  .translate([250,250])
  
var path = d3.geoPath().projection(projection);

d3.json("https://unpkg.com/world-atlas@1/world/110m.json").then( function(data) {

  var world = {type:"Sphere"}
  
  svg.append("path")
    .datum(world)
    .attr("d", path)
    .attr("fill","lightblue");
    
  svg.selectAll(null)
    .data(topojson.feature(data,data.objects.land).features)
    .enter()
    .append("path")
    .attr("fill","lightgreen")
    .attr("d",path);
  
  
  svg.call(d3.drag()
    .on("drag", function() {
      var xy = d3.mouse(this);
      projection.rotate(xy)
      svg.selectAll("path")
       .attr("d",path);
    }))
  

 
 
 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>

<svg width="500" height="500"></svg>

如何使用d3.js拖动和旋转正交地图（globe）

1 个答案: