"エラー：<path>属性d：期待数"

Question

cartogram.jsとd3.jsを使用してカートログを作成しようとしています。私はcartogram.js repoとhereにある例を使って、d3.geo.mercator()投影を使ってSVG内にワールドマップを生成するスクリプトを作成しましたが、cartogram.jsライブラリを使用してマップを歪ませようとしています

var dataLoaded = new Event("dataLoaded"), 
svg = d3.select("svg"), 
proj = d3.geo.mercator(), 
path = d3.geo.path() 
    .projection(proj), 
countries = svg.append("g") 
    .attr("id", "countries") 
    .selectAll("path"), 
carto = d3.cartogram() 
    .projection(proj) 
    .properties(function(d) { 
     return d.properties 
    }), 
mapData = d3.map(), 
geometries, 
topology 

function init() { 
    d3.csv("data/data.csv", function(data) { 
     data.forEach(function (d) { 
      mapData.set(d.COUNTRY, d.VALUE) 
     }) 
    }) 

    d3.json("data/world.json", function(data) { 
     topology = data 
     geometries = topology.objects.countries 

     var features = carto.features(topology, geometries) 

     countries = countries 
      .data(features) 
      .enter() 
      .append("path") 
      .attr("fill", function (e) { 
       return "#000000" 
      }) 
      .attr("d", path) 

     document.dispatchEvent(dataLoaded) 
    }) 
} 

document.addEventListener("dataLoaded", function() { 
    $("#container").css("visibility", "visible").hide().fadeIn("fast") 
    $("header").css("visibility", "visible").hide().fadeIn("slow") 

    carto.value(function(d) { 
     return +mapData.get(d.properties.name) 
    }) 

    countries.data(carto(topology, geometries).features) 

    countries.transition() 
     .duration(750) 
     .attr("d", carto.path); 
}) 

init() 

と私はマップを歪曲するために使用するデータを含むCSVファイル：

d3.js:8756 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…". 
    (anonymous function) @ d3.js:8756 
    tick @ d3.js:8956 
    (anonymous function) @ d3.js:8936 
    d3_timer_mark @ d3.js:2166 
    d3_timer_step @ d3.js:2147 

ここで私はマップを歪曲するために使用しています私のコードだ：

「は、次のエラーを取得メートル

COUNTRY,VALUE 
Afghanistan,90 
Albania,390 
Algeria,90 
Andora,110 
Angola,10 
Antigua,2400 
Argentina,320 
Armenia,40 
Australia,6600 
Austria,1300 
Axerbaijan,0 
Bahamas,1900 
Bahrain,90 
Bangladesh,50 
Barbados,8100 
Belarus,20 
Belgium,260 
Belize,480 
Benin,0 
Bhutan,170 
Bolivia,90 
Bosnia,70 
Botswana,110 
Brazil,1300 
Brunei,40 
Bulgaria,3600 
Burkina Faso,0 
Burundi,0 
Cabo Verde,0 
Cambodia,720 
Cameroon,10 
Canada,4400 
Central African Republic,0 
Chad,10 
Chile,320 
China,1600 
Combodia,0 
Comoros,10 
Congo,20 
Costa Rica,2900 
Cote d'Ivoire,0 
Croatia,9900 
Cuba,14800 
Cyprus,8100 
Czech Republic,70 
Denmark,320 
Dijbouti,0 
Dominica,0 
Dominican Republic,4400 
Ecuador,90 
Egypt,6600 
El Salvador,10 
Equatorial Guinea,0 
Eritrea,10 
Estonia,110 
Ethiopia,70 
Fiji,1900 
Finland,720 
France,2900 
Gabon,10 
Gambia,2400 
Georgia,70 
Germany,880 
Ghana,210 
Greece,14800 
Grenada,720 
Guatemala,40 
Guinea,0 
Guinea - Bissau,0 
Guyana,50 
Haiti,90 
Honduras,110 
Hungary,170 
Iceland,8100 
India,2900 
Indonesia,390 
Iran,390 
Iraq,140 
Ireland,1900 
Israel,590 
Italy,9900 
Jamaica,6600 
Japan,3600 
Jordan,480 
Kazakhstan,40 
Kenya,1000 
Kiribati,10 
Kosovo,10 
Kuwait,40 
Kyrgyzstan,10 
Laos,70 
Latvia,110 
Lebanon,70 
Lesotho,0 
Liberia,10 
Libya,30 
Liechtenstein,10 
Lithuania,70 
Luxembourg,50 
Macedonia,70 
Madagascar,0 
Malawi,40 
Malaysia,1300 
Maldives,12100 
Mali,40 
Malta,12100 
Marshall Islands,10 
Mauritania,10 
Mauritius,6600 
Mexico,18100 
Micronesia,20 
Moldova,20 
Monaco,590 
Mongolia,110 
Montenegro,880 
Morocco,4400 
Mozambique,90 
Myanmar,90 
Namibia,210 
Nauru,10 
Nepal,0 
Netherlands,50 
New Zealand,1900 
Nicaragua,50 
Niger,10 
Nigeria,90 
North Korea,390 
Norway,1600 
Oman,590 
Pakistan,110 
Palau,50 
Palestine,10 
Panama,210 
Papua New Guinea,40 
Paraguay,10 
Peru,1000 
Philippines,590 
Poland,880 
Portugal,12100 
Qatar,210 
Romania,320 
Russia,480 
Rwanda,20 
Saint Kitts and Nevis,0 
Saint Lucia,90 
Saint Vincent and the Grenadines,0 
Samoa,90 
San Marino,70 
Sao Tome and Principe,10 
Saudi Arabia,110 
Senegal,70 
Serbia,50 
Seychelles,1600 
Sierra Leone,20 
Singapore,880 
Slovakia,70 
Slovenia,390 
Solomon Islands,10 
Somalia,70 
South Africa,1900 
South Korea,140 
South Sudan ,0 
Spain,14800 
Sri Lanka,3600 
Sudan,20 
Suriname,10 
Sweden,720 
Switzerland,1300 
Syria,590 
Taiwan,50 
Tajikistan,10 
Tanzania,260 
Thailand,14800 
Timor-Leste,0 
Togo,10 
Tonga,50 
Trinidad and Tobago,140 
Tunisia,4400 
Turkey,9900 
Turkmenistan,10 
Tuvalu,30 
Uganda,50 
Ukraine,70 
United Arab Emirates,20 
United Kingdom,50 
United States of America,3600 
Uruguay,50 
Uzbekistan,30 
Vanuatu,30 
Vatican City,30 
Venezuela,170 
Vietnam,2400 
Yemen,20 
Zambia,90 
Zimbabwe,70 

このプロジェクトの前にd3.jsを使用した経験はありません。私はあなたに私が与えるフィードバック/ガイダンスに感謝します。

私はバージョン3.5.17のd3、fyiを使用しています。

ありがとうございました。

---

UPDATE - マークの提案@を1として2016年9月8日午後3時22分BST

それでも問題が解決しないものの、私は、d3-queueを実装しました。しかし、私がこの実装に何か悪いことをしたなら、誰でも私に与えることができるどんな洞察にも感謝します！ :)

var svg = d3.select("svg"), 
proj = d3.geo.mercator(), 
path = d3.geo.path() 
    .projection(proj), 
countries = svg.append("g") 
    .attr("id", "countries") 
    .selectAll("path"), 
carto = d3.cartogram() 
    .projection(proj) 
    .properties(function(d) { 
     return d.properties 
    }), 
queue = d3.queue() 
    .defer(csv) 
    .defer(json) 
    .awaitAll(ready), 
mapData = d3.map(), 
geometries, 
topology 

function json(callback) { 
    d3.json("data/world.json", function(data) { 
     topology = data 
     geometries = topology.objects.countries 

     var features = carto.features(topology, geometries) 

     countries = countries 
      .data(features) 
      .enter() 
      .append("path") 
      .attr("fill", function (e) { 
       return "#000000" 
      }) 
      .attr("d", path) 

     callback() 
    }) 
} 

function csv(callback) { 
    d3.csv("data/data.csv", function(data) { 
     data.forEach(function (d) { 
      mapData.set(d.COUNTRY, +d.VALUE) 
     }) 

     callback() 
    }) 
} 

function ready() { 
    $("#container").css("visibility", "visible").hide().fadeIn("fast") 
    $("header").css("visibility", "visible").hide().fadeIn("slow") 

    carto.value(function(d) { 
     if (mapData.has(d.properties.name)) { 
      return +mapData.get(d.properties.name) 
     } 
    }) 

    countries.data(carto(topology, geometries).features) 

    countries.transition() 
     .duration(750) 
     .attr("d", carto.path); 
} 

---

UPDATE 2 - ここでは2016年9月8日18時05分BST

は、テストのために使用することができますPlunker上のスクリプトの最新バージョン、の礼儀であります@マーク：http://plnkr.co/edit/iK9EZSIfwIXjIEBHhlep?p=preview

結果のカートグラフィックが正しく表示されないものの、私の初期のエラーは修正されているようです。

---

UPDATE 3 - 2016年10月8日20時45 BST

マークの答え@私の問題の多くを明確に助け、私はしかし、問題を解決するために、結果として部分的に機能統計地図を持っていましたhere詳細、私は--stitch-poles falseパラメータを使用して、私のマップファイルを再生成し、これをやった後、私は再び次のエラー受けています：このエラーのマルコ初期修正@

d3.js:8756 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…". 

ですそれでも私はなぜこれが再浮上したのかについては非常に混乱しています。最新のコードhereと私の新しいマップtopojsonファイルhereを見ることができます。再度、感謝します。

Answer 1

さて、私は進歩しています。 .value機能を修正した後に、あなたが値を設定することができない理由が、あなたの値があまりにも異質であることが判明しました。これがなぜcartogram.jsを投げ捨てるのかわかりませんが、問題をスケールを導入することで簡単に解決できます。あなたのデータと

：

s = d3.scale.linear().range([1,100]).domain(d3.extent(data, function(d){ return +d.VALUE})); 

そしてあなた.valueアクセサに：

carto.value(function(d,i) { 
    if (mapData.has(d.properties.name)) { 
    return s(mapData.get(d.properties.name)); 
    } else { 
    return 1; 
    } 
}); 

ああ、しかし、すべてのあなたの問題が修正されていません。 cartogram.jsによって生成された経路によって投影（すなわち、ロシアとフィジー）を「包む」国は歪んでいるようです。しかし、修正点はありますが、長さはhere

here's what we've got so farとは関係ありません。