Question

我正在尝试实施a tutorial called 'Mapping Minimum Wages in Europe'来渲染欧盟的d3地图，可视化不同组成国家的数据。

当我尝试执行本教程的最后一步时，将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文件位于同一目录中。所以这不是问题。

Answer 1

你需要以这种方式包含coldbrewer，就像java #include语句一样

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

为colorbrewer渲染d3.js库可视化

1 个答案: