代码之家 › 专栏 › 技术社区 › David Merritt

如何将d3代码从v3更新到v4?

geojson d3.js javascript

David Merritt · 技术社区 · 8 年前

var url = 'https://gist.githubusercontent.com/
d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb5
6e36/us-states.json';

d3.json(url, function (error, data) {
    var path = d3.geo.path();
    svg.selectAll('path')
        .data(data.features)
        .enter()
        .append('path')
        .attr('d', path);
});

我尽量让我的代码保持最新,这样我就可以开始使用d3v4了,但很多教科书都过时了。

上述示例适用于d3v3(如下所示: http://bl.ocks.org/d3byex/378d68f27a1cc144aa8a )

我知道这一点。地理位置。path()需要更新为。geoPath(),但我缺少至少一个需要进行的其他更新,以使其符合d3v4。

1 回复 | 直到 8 年前

Andrew Reid 8 年前

在d3v3 d3中。地理位置。路径使用默认投影,即美国阿尔伯斯投影:

d3.geo。路径()

使用默认设置创建新的地理路径生成器: link

在d3v4中,默认投影为空投影:

如果指定了投影,则将当前投影设置为指定投影。如果未指定投影,则返回 link

这就是为什么数据在d3v3地图中被适当地缩放和居中,尽管如果它在其他任何地方都不会。

geoPath的d3v4默认投影只是将数据中的坐标转换为svg坐标,无需转换或投影。因此,在d3v4中,您的数据需要正确渲染投影(它是绘制的,但由于美国的所有x坐标都是负数,因此在屏幕外)。要使用v3的默认投影(美国阿尔伯斯合成投影),可以使用:

var projection = d3.geoAlbersUsa();
var path = d3.geoPath().projection(projection);

        var width = 950, height = 500;
        var svg = d3.select('body')
            .append('svg')
            .attr("width",width)
            .attr("height",height);

        var url = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-states.json';
        d3.json(url, function (error, data) {
            
            var projection = d3.geoAlbersUsa()
            var path = d3.geoPath().projection(projection);
            
            svg.selectAll('path')
                .data(data.features)
                .enter()
                .append('path')
                .attr('d', path);
        });

    <script src="http://d3js.org/d3.v4.min.js"></script>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前