D3.js 检测d3中的轴日期格式更改

当用户将我的图形放大到某个级别时，我试图更改数据集。我目前有一个面积图，它使用的是

d3.scaleTime（）

。我的域名基于12个月（12点）的

[min，max]

数据。我的缩放功能正常，可以从中看到

目前，x轴显示月份。当用户在x轴上缩放时，更改为天。此时，我想更改数据集。如何检测缩放级别的变化是否足以使x轴显示天数，以便更改数据集

用于绘图的代码

 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
}

---

d3.zoom（）仅缩放和转换svg的缩放部分。您的代码中已经有回调。缩放功能在每次缩放更改时都会被调用，甚至在动画中也是如此。更改数据是通过d3.select（“选择器”）.datum（）完成的。但是您无法轻松更改svg中的点数，因为面积图是一条闭合路径。您必须确定上下点，并插入所需的点。我曾经在stackoverflow上看到过一个解决方案。也许你可以在它上面创建一个新的图形，当缩放级别再次改变时删除它。@ego2dot0我如何判断x轴在哪一点改变？我不明白。这都在例子中。调用d3.event.transform.rescaleX（x2）.domain（）以两项数组的形式返回开始和结束日期。