在d3中检测轴日期格式的变化

Question

当用户将我的图表放大到某个级别时，我正在尝试更改数据集。我目前有一个使用d3.scaleTime()的区域图。我的域名基于12个月（12分）数据的[min,max]。我的缩放功能正常，可在此jsfiddle中看到。

目前x轴显示月份。当用户放大x轴变化为天。此时我想更改数据集。如何检测缩放级别何时发生足够变化以使x-axis显示天数，以便我可以更改数据集？

用于绘制的代码

 var data = getYearly();

 var svg = d3.select("svg"),
     margin = {top: 20,right: 20,bottom: 110,left: 40},
     margin2 = {top: 430,right: 20,bottom: 30,left: 40},
     width = +svg.attr("width") - margin.left - margin.right,
     height = +svg.attr("height") - margin.top - margin.bottom,
     height2 = +svg.attr("height") - margin2.top - margin2.bottom;

 var parseDate = d3.timeParse("%b %Y");

 var x = d3.scaleTime().range([0, width]),
     x2 = d3.scaleTime().range([0, width]),
     y = d3.scaleLinear().range([height, 0]),
     y2 = d3.scaleLinear().range([height2, 0]);

 var xAxis = d3.axisBottom(x),
     xAxis2 = d3.axisBottom(x2),
     yAxis = d3.axisLeft(y);

 var brush = d3.brushX()
     .extent([[0, 0],[width, height2]
     ])
     .on("brush end", brushed);

 var zoom = d3.zoom()
     .scaleExtent([1, Infinity])
     .translateExtent([
         [0, 0],
         [width, height]
     ])
     .extent([
         [0, 0],
         [width, height]
     ])
     .on("zoom", zoomed);

 var area = d3.area()
     .curve(d3.curveMonotoneX)
     .x(function(d) {
         return x(getDate(d));
     })
     .y0(height)
     .y1(function(d) {
         return y(d.kWh);
     });

 svg.append("defs").append("clipPath")
     .attr("id", "clip")
     .append("rect")
     .attr("width", width)
     .attr("height", height);

 var focus = svg.append("g")
     .attr("class", "focus")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 var context = svg.append("g")
     .attr("class", "context")
     .attr("transform", "translate(" + margin2.left + "," + margin2.top +")");


 x.domain(d3.extent(data, function(d) {
     return getDate(d);
 }));
 y.domain([0, d3.max(data, function(d) {
     return d.kWh;
 })]);
 x2.domain(x.domain());
 y2.domain(y.domain());

 focus.append("path")
     .datum(data)
     .attr("class", "area")
     .attr("d", area);

 focus.append("g")
     .attr("class", "axis axis--x")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis);

 focus.append("g")
     .attr("class", "axis axis--y")
     .call(yAxis);

 svg.append("rect")
     .attr("class", "zoom")
     .attr("width", width)
     .attr("height", height)
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
     .call(zoom);



 function brushed() {
     if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
     var s = d3.event.selection || x2.range();
     x.domain(s.map(x2.invert, x2));
     focus.select(".area").attr("d", area);
     focus.select(".axis--x").call(xAxis);
     svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
         .scale(width / (s[1] - s[0]))
         .translate(-s[0], 0));
 }

 function zoomed() {
     if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
     console.log(d3.extent(data.map(function(d) {
         return d.date;
     }))[1].valueOf());
     var t = d3.event.transform;
     x.domain(t.rescaleX(x2).domain());
     focus.select(".area").attr("d", area);
     focus.select(".axis--x").call(xAxis);
     context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
 }

 function type(d) {
     d.date = parseDate(d.date);
     d.price = +d.price;
     return d;
 }

 function getDate(d) {
     return new Date(d.date);
 }

第一个数据集：

{  
   "date":"2015-09-11T08:28:54-05:00",
   "kWh":1146,
   "maxTemp":100,
   "minTemp":80
},
{  
   "date":"2015-10-11T08:28:54-05:00",
   "kWh":1173,
   "maxTemp":95,
   "minTemp":85
},
{  
   "date":"2015-11-11T08:28:54-06:00",
   "kWh":1072,
   "maxTemp":94,
   "minTemp":74
},
{  
   "date":"2015-12-11T08:28:54-06:00",
   "kWh":902,
   "maxTemp":80,
   "minTemp":60
},
{  
   "date":"2016-01-11T08:28:54-06:00",
   "kWh":1013,
   "maxTemp":75,
   "minTemp":40
},
{  
   "date":"2016-02-11T08:28:54-06:00",
   "kWh":1083,
   "maxTemp":76,
   "minTemp":45
},
{  
   "date":"2016-03-11T08:28:54-06:00",
   "kWh":1128,
   "maxTemp":94,
   "minTemp":74
},
{  
   "date":"2016-04-11T08:28:54-05:00",
   "kWh":1202,
   "maxTemp":94,
   "minTemp":74
},
{  
   "date":"2016-05-11T08:28:54-05:00",
   "kWh":1071,
   "maxTemp":94,
   "minTemp":74
},
{  
   "date":"2016-06-11T08:28:54-05:00",
   "kWh":1219,
   "maxTemp":94,
   "minTemp":74
},
{  
   "date":"2016-07-11T08:28:54-05:00",
   "kWh":1210,
   "maxTemp":94,
   "minTemp":74
},
{  
   "date":"2016-08-11T08:28:54-05:00",
   "kWh":1281,
   "maxTemp":94,
   "minTemp":74
},
{  
   "date":"2016-09-11T08:28:54-05:00",
   "kWh":246,
   "maxTemp":70,
   "minTemp":30
}