Question

我正在尝试用d3.js绘制地图。我已经第一次做了它并且它有效，但现在我尝试拆分我的代码以使其更容易阅读。当我分裂它时，我得到NaN而不是我的路径中的位置。

如果您想要完整版，请参阅我的回购链接： https://github.com/TheWalkingDesign/map-plugin

感谢您的帮助，我对此感到困惑。

this.projection = setProjection(
        this.options.projection,
        this.options.center,
        this.options.translate,
        this.options.scale
        );

    this.path = d3.geo.path().projection(this.projection);

    this.svg = d3.select("#"+this.options.mapid).append("svg")
        .attr("width", this.width)
        .attr("height", this.height)
        .call(this.zoom); // enable zoomable on svg

    this.g = this.svg.append("g");

    drawMap(this.topo, this.path, this.g, this.options.mapid);

function setProjection(type, center, translate, scale) {
    var projection;
    if (type === 'equirectangular') {
        projection = d3.geo.equirectangular();
    } else if (type === 'mercator') {
        projection : d3.geo.mercator();
    }
    projection.center(center) // bug when set to 0, 0
        .translate(translate) // center the map in the container
        .scale(scale); // scale the map to fit the width of container
    return projection;
};

function drawMap(topo, path, container, mapid) {
    // Draw countries geometry on map
    var countries = container.append('g').attr('id', mapid + '_countries').selectAll('.' + mapid + '_country').data(topo);

    countries.enter().append("path")
        .attr("class", mapid + '_country')
        .attr("d", path);

};

Answer 1

您正在drawMap范围内执行路径，这就是为什么它无法找到this.projection。

试试这个：

this.path = d3.geo.path().projection(this.projection).bind(this);

Answer 2

好的，最后我发现了我的错误。我使用element.innerWidth来查找div的宽度，但我没有使用Jquery，所以我不得不使用element.offsetWidth。

我的宽度和高度属性都未定义，因此我无法创建路径使用的良好投影。

对此感到抱歉，感谢您的帮助。

在对象中拆分代码时，d3js得到<path d =“NaN”>

2 个答案: