多边形包含的更改使我的演示在D3中出错 [英] The change of polygon contain make my demo wrong in D3

问题描述

我正在使用 D3 在画布上绘制一些信息.而且我的目标是版本3 ，但是在版本4 中失败了(当然，我已将版本4中的更新功能从d3.geo.mercator()更改为d3.geoMercator()) .我调试了一些相对功能，发现投影功能不一样.

I'm using D3 to draw some pieces of information on canvas. And I got my aim in version 3 but failed in version 4 (Of course, I had changed the updated functions in version 4 such as d3.geo.mercator() to d3.geoMercator()). I debugged some relative functions and found the projection function was different.

在版本3中:

function projection(point) {
  point = projectRotate(point[0] * d3_radians, point[1] * d3_radians);
  return [ point[0] * k + δx, δy - point[1] * k ];
}

在版本4中:

function projection(point) {
  point = projectRotate(point[0] * radians, point[1] * radians);
  return [point[0] * k + dx, dy - point[1] * k];
}

我的代码段如下:

var d3Projection = d3.geoMercator().scale(1).translate([0, 0]);
// var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]);
var d3Path = d3.geoPath().projection(d3Projection);
// var d3Path = d3.geo.path().projection(d3Projection);
var pixelBounds = d3Path.bounds(features);
var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];

我在那里调试，发现'δx'的值不同于'dx'，这与'δy(dy)'

I debugged there and found the value of 'δx' was different from 'dx', which is the same condition on 'δy(dy)'

第4版中的调试 在版本3中进行调试

Debugging in Version 4 Debugging in Version 3

能否请您解释这种情况下的差异?

dx(δx)，dy(δy)是什么意思?

D3 V3 正确的演示.

D3 V4中心坐标错误. 错误的演示.

D3 V4 The center coordinate is wrong. wrong demo.

_______________________________________________________________________________ 我发现了不同的代码，导致我的演示失败 此代码已从v3.5.17更改，如果我将此行代码更改回v3.5.16，一切都会好起来的.我会找到原因的.

_______________________________________________________________________________ I found the different code which result into my wrong demo This code was changed from v3.5.17, if I change this line code back to v3.5.16, everything will be OK. I will get the reason.

推荐答案

香草D3v3和v4中的投影功能相同，您的问题是您使用的是某些经过修改的D3v3版本.如果您尝试在D3v3环境中运行此代码段(辅助将topojson加载到var topo中):

The projection function in vanilla D3v3 and v4 is identical, your problem is that you're using some modified D3v3 version. If you try running this snippet in your D3v3 environment (assiming the topojson is loaded in var topo):

var features = topojson.feature(topo, topo.objects.counties);
var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]);
var d3Path = d3.geo.path().projection(d3Projection);
console.log(JSON.stringify(d3Path.bounds(features)));

你会得到

[[-3.141592653589793,-3.141592653589793],[3.141592653589793,3.141592653589793]]

如果您加载当前的https://d3js.org/d3.v3.min.js，则会产生相同的摘要

If however you load current https://d3js.org/d3.v3.min.js, the same exact snippet will produce

[[2.110384445824674,-0.5558860193147427],[2.1337212032517625,-0.5298056661805025]]

与V4相同.因此，您需要修复代码以使其与当前的D3(v3和v4)一起使用，或者以与D3v3相同的方式修改D3v4.

which is the same as V4. So you either need to fix your code to work with current D3 (v3 and v4), or modify your D3v4 in the same way as D3v3.

这篇关于多边形包含的更改使我的演示在D3中出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！