为colorbrewer渲染d3.js库可视化

Question

I'm trying to implement a tutorial called 'Mapping Minimum Wages in Europe' to render a d3 map of the European Union, visualizing data across the different component nations.

When I try to execute the last step of the tutorial, incorporating colorbrewer with the d3.js library to colour the countries in a different way based on the data, using the following function:

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);
}

the program crashes and my browser loads nothing.

I've narrowed it down to that code there.

Perhaps someone more familiar with Javascript might be able to figure out what is going wrong here.

The files named in the component:

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

are in the same directory as my index.html file. So that isn't the issue.

Answer 1

您需要以这种方式像Java #include语句一样包含coldbrewer

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