爲colorbrewer渲染d3.js庫可視化效果

我試圖實施a tutorial called 'Mapping Minimum Wages in Europe'來呈現歐盟的d3地圖，可視化跨不同組件國家的數據。爲colorbrewer渲染d3.js庫可視化效果

當我嘗試執行該教程的最後一步，結合colorbrewer與d3.js庫上色國家基於數據以不同的方式，使用下面的函數：

queue() 
    .defer(d3.json, "eu.json") 
    .defer(d3.json, "data.json") 
    .await(ready); 

function ready(error, europe, data) { 
    if (error) return console.error(error); 

    var quantize = d3.scale.quantile() 
      .domain(d3.extent(d3.values(data), function (d) { return d.value; })) 
      .range(d3.range(6)), 
     cb = "Reds"; 

    function fill(datum, index) { 
      var iso = datum.properties.iso_n3, 
       val = data[iso] && data[iso].value; 
      if (val) { 
       var c = colorbrewer[cb][6][quantize(val)]; 
       return c; 
      } else { 
       return "lightgray"; 
      } 
    } 


    var svg = d3.select("#container").append("svg") 
     .attr("width", width) 
     .attr("height", height); 

    var eu = topojson.feature(europe, europe.objects.europe), 
     countries = eu.features; 

    projection.scale(1).translate([0, 0]) 

    var b = path.bounds(eu), 
     s = .95/Math.max((b[1][0] - b[0][0])/width, (b[1][1] - b[0][1])/height), 
     t = [(width - s * (b[1][0] + b[0][0]))/2, (height - s * (b[1][1] + b[0][1]))/2]; 

    projection.scale(s).translate(t); 

    svg.selectAll("path") 
     .data(countries) 
     .enter().append("path") 
     .attr("d", path) 
     .attr("class", "country") 
     .classed("eu-country", isEuCountry); 

    svg.selectAll(".eu-country") 
     .style("fill", fill); 
}

的程序崩潰，我的瀏覽器不加載任何東西。

我已經縮小到那裏的代碼。

也許有人更熟悉Javascript可能能夠找出這裏出了什麼問題。

在組件命名的文件：

queue() 
    .defer(d3.json, "eu.json") 
    .defer(d3.json, "data.json") 
    .await(ready);

是在同一目錄作爲我index.html文件。所以這不是問題。

來源

2015-09-30 s.matthew.english

你是什麼意思時，你說的是「崩潰」和你怎麼範圍縮小到您發佈的代碼？ –

你可以（上傳到某處並且）添加指向這兩個文件（eu.json，data.json）的鏈接，因此可以在另一臺計算機上覆制代碼？同時，您可能會對此歐盟地圖topojson示例感興趣：http://bl.ocks.org/michalskop/001f6182db52d08f4925 –

我想出了問題並將其作爲答案發布 –

您需要包括coldbrewer，就像一個Java #include聲明，以這種方式

<script src="http://d3js.org/colorbrewer.v1.min.js"></script>

來源

2015-10-07 07:56:42

爲colorbrewer渲染d3.js庫可視化效果

回答

相關問題