d3时间表更新问题

Question

我得到了这段代码，其中时间轴通过滑动（手动）更新其值。问题是我得到一个错误，说投影不是代码。有人可以帮帮我吗。

设置滑块的大小。

  var margin = {
        top: 50,
        right: 90,
        bottom: 50,
        left: 50
      },
      width = 1000 - margin.left - margin.right,
      height = 300 - margin.bottom - margin.top;

      // scale function
      var timeScale = d3.time.scale()
      .domain([new Date('2016-01-01'), new Date('2016-12-31')])
      .range([0, width])
      .clamp(true);

      // initial value 
      var startValue = timeScale(new Date('2012-03-20'));
      startingValue = new Date('2016-08-12');

      //////////

定义画笔

      var brush = d3.svg.brush()
      .x(timeScale)
      .extent([startingValue, startingValue])
      .on("brush", brushed);

      var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")

        // classic transform to position g
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.append("g")
        .attr("class", "x axis")

      // put in middle of screen
      .attr("transform", "translate(0," + height / 2 + ")")

      // inroduce axis
      .call(d3.svg.axis()
        .scale(timeScale)
        .orient("bottom")
        .tickFormat(function(d) {
        return formatDate(d);
        })

        .tickSize(0)
        .tickPadding(12)
        .tickValues([timeScale.domain()[0], timeScale.domain()[1]]))
      .select(".domain")
      .select(function() {
        console.log(this);
        return this.parentNode.appendChild(this.cloneNode(true));
      })

      .attr("class", "halo");

      var slider = svg.append("g")
      .attr("class", "slider")
      .call(brush);


      slider.selectAll(".extent,.resize")
      .remove();

      slider.select(".background")
      .attr("height", height);

      var handle = slider.append("g")
      .attr("class", "handle")

      handle.append("path")
      .attr("transform", "translate(0," + height / 2 + ")")
      .attr("d", "M 0 -20 V 20")

      handle.append('text')
      .text(startingValue)
      .attr("transform", "translate(" + (-18) + " ," + (height / 2 - 25) + ")");

      slider
      .call(brush.event)

使用投影设置画布。

var width = 1280;
      var height = 900;
      var projection = d3.geo.mercator()
      .scale(200000)
      .center([4.9, 52.36]) 
      .translate([width / 2, height / 2]); 
      var canvas = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .call(d3.behavior.zoom().on("zoom", function () {
        canvas.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
      }))
      .append("g")

将当天的事件和坐标记录到控制台。

    function brushed() {
        var value = brush.extent()[0];
        console.log()
        if (d3.event.sourceEvent) { // not a programmatic event
          value = timeScale.invert(d3.mouse(this)[0]);
          brush.extent([value, value]);
        }

        handle.attr("transform", "translate(" + timeScale(value) + ",0)");
        handle.select('text').text(formatDate(value));
        slidedate = (formatDate(value));
        console.log(slidedate)


    console.log("dit is datum" + slidedate)
    dataCsv.forEach(function(d) {
            //console.log("datum is" + slidedate)

        if (slidedate == d.Datepattern_startdate) {

          console.log(slidedate)
          console.log(d.Title)

          coords = projection([+d["Longitude"],+d["Latitude"]]);
          console.log(coords);

          var circle = canvas.append("circle")
          .attr("cx", coords[0] )
          .attr("cy", coords[1] )
          .attr("r", "6px")
          .attr("fill", "orange")
          .style("opacity", .6)
          .append("title")
          .text(function(dataCsv) {return d.Title})         
        } else {
          //console.log(" Werkt niet")
        }
      });
Error = mapm.html:272 Uncaught TypeError: projection is not a function.