Question

因此，我获得了一项任务，我需要使用美国地图，分为州和州。我已经有了当前的代码，需要对其进行扩展。

我无法理解代码中的以下代码段。

var colorRange = [        'rgb(247,251,255)',
                                    'rgb(222,235,247)',
                                    'rgb(198,219,239)',
                                    'rgb(158,202,225)',
                                    'rgb(107,174,214)',
                                    'rgb(66,146,198)',
                                    'rgb(33,113,181)',
                                    'rgb(8,81,156)',
                                    'rgb(8,48,107)'];

var quantile = d3.scale.quantile()
            .range(colorRange);

var path = d3.geo.path();

var svg = d3.select("#map")
            .attr("width", width)
            .attr("height", height)  
    .append('svg:g')
        .call(d3.behavior.zoom().on("zoom", redraw))
      .append('svg:g');

svg.attr("transform", "scale( " + .9 + ")");

function redraw() {
  console.log("here", d3.event.translate, d3.event.scale);
  svg.attr("transform",
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}

此代码段的每一行究竟发生了什么？

完整代码取自here

由于

Answer 1

var colorRange只是一个变量，用于保存要应用于各个县的颜色，var quantile设置要应用的颜色的比例，var path调用路径功能并且var svg创建了一个svg。在此，命令.call具有功能.on("zoom"，其调用函数redraw。 function redraw定义了函数，该函数根据缩放

转换和缩放svg

初学者在d3，制作美国县地图

1 个答案: