Javascript d3.js：响应鼠标滚轮适当缩放

我正在完成d3的一个介绍性项目。从逗号分隔的列表中，我正在读取表单的数据。我可以获得最初显示的数据，没有问题。但是，当我使用鼠标滚轮放大或缩小时，会发生两件事：

• x轴标签，应该是倍，变成了数字，我不太明白它们的基础
• 对于我正在使用的数据集，y轴标签应该是介于0和25000之间的数字，它们变成了与x轴上显示的数字相似的数字
• 最初绘制的条形图将消失

我已经在这篇文章的底部包含了我所有的源代码，但我会强调我认为重要的项目。请记住，我并不确定什么是重要的，因为我是d3的新手

当收到鼠标滚轮事件时，调用此函数

function redraw() {
  drawAxes();
  redrawBars();
}

drawAxes（）看起来像这样：

function drawAxes() {
  chart.select(".x.axis").call(xAxis);
  chart.select(".y.axis").call(yAxis);
}

function redrawBars() {
  chart.selectAll("g.data_bar")
    .attr("height", function(d) { return yAxisScale(maxPval - d.pval); })
    .attr("transform", function(d) { return "translate(0," + yAxisScale(d.pval) + ")"; } );
}

重画条（）如下所示：

function drawAxes() {
  chart.select(".x.axis").call(xAxis);
  chart.select(".y.axis").call(yAxis);
}

function redrawBars() {
  chart.selectAll("g.data_bar")
    .attr("height", function(d) { return yAxisScale(maxPval - d.pval); })
    .attr("transform", function(d) { return "translate(0," + yAxisScale(d.pval) + ")"; } );
}

数据的格式如下： 时间戳，功率值

2015-04-14 18:49:17, 14388
2015-04-14 18:49:18, 14388
2015-04-14 18:49:19, 14456
2015-04-14 18:49:20, 14456
2015-04-14 18:49:21, 14289
2015-04-14 18:49:22, 14289
2015-04-14 18:49:36, 16106
2015-04-14 18:53:36, 6463
2015-04-14 18:53:37, 6463
2015-04-14 18:53:38, 6425
2015-04-14 18:53:39, 6425
2015-04-14 18:53:40, 6498
2015-04-14 18:53:41, 3848
2015-04-14 18:53:42, 3848
2015-04-14 18:53:43, 3848
2015-04-14 18:53:44, 3713
2015-04-14 18:53:45, 3713
2015-04-14 18:53:46, 3677
2015-04-14 18:53:47, 3677

如果还有什么我需要包括或描述的，请告诉我。我意识到我的代码在这一点上相当难看。

/*
*不依赖于数据的变量。
*/
var barWidth=1，
dateFormatter=d3.time.format（“%Y-%m-%d%H:%m:%S”），
边距={顶部：20，右侧：30，底部：30，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
/*
*确实依赖于数据的变量。
*/
var maxPval=-1；
/*
*为轴和轴本身创建比例
*/
var xaxiscale=d3.time.scale（）.range（[0，width]），
yAxisScale=d3.scale.linear（）.范围（[height，0]），
xAxis=d3.svg.axis（）
.scale（xAxisScale）
.orient（“底部”），
yAxis=d3.svg.axis（）
.比例（yAxisScale）
.东方（“左”）；
//缩放行为
var zoom=d3.behavior.zoom（）
.x（x轴标度）
.y（Yaxis刻度）
.scaleExtent（[0.11000]）
。打开（“缩放”，缩放）；
/*
*mousewheel事件侦听器调用的函数。
*/
函数缩放（）{
log（“收到鼠标滚轮事件”）；
重画（）；
} 
//计算图表的空间。
var图表=d3。选择（“图表”）
.attr（“宽度”，“宽度+边距.左+边距.右））
.attr（“高度”，（高度+页边距.顶部+页边距.底部））
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.呼叫（缩放）；
//将轴添加到页面
图表.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移”（+margin.left+）、“+height+”）
.呼叫（xAxis）；
图表.附加（“g”）
.attr（“类”、“y轴”）
.attr（“变换”、“平移”（+margin.left+）、“+0+”）
.呼叫（yAxis）；
/*
*根据传递给图形的时间和功率值初始化轴。
*/
函数initAxes（数据）{
var xaxisdextent=d3.extent（数据，函数（d）{return+d.date；}）；
域（[新日期（xAxisExtent[0]），新日期（xAxisExtent[1]））；
域（[0，d3.max（数据，函数（d）{return d.pval；}）]）；
牵引轴（）；
}
/*
*重新绘制条形图以调整缩放事件。
*/
函数drawAxes（）{
图表。选择（“.x.axis”）。调用（xAxis）；
图表。选择（“.y.axis”）。调用（yAxis）；
}
/*
*初始化条形图。
*/
函数初始化条（数据）{
图表。选择全部（“g.data\u栏”）
.数据（数据）
.输入（）
.附加（“g”）
.attr（“转换”，
职能（d）{
控制台日志（d.date）；
返回“translate”（+（xaxiscale（d.date）+margin.left）+”，0）；
})
.attr（“类”、“数据条”）
.append（“rect”）
.attr（“宽度”，条形宽度-0.1）
.attr（“高度”，函数（d）{return yaxiscale（maxPval-d.pval）；}）
.attr（“transform”，函数（d）{return“translate（0），+yaxiscale（d.pval）+”）；}；
}
/*
*重新绘制页面上的所有元素以响应鼠标滚轮事件。
*/
函数重画（）{
牵引轴（）；
重画条（）；
}
/*
*鼠标滚轮事件更改比例后重新绘制条形图。
*/
函数重画条（）{
图表。选择全部（“g.data\u栏”）
.attr（“高度”，函数（d）{return yaxiscale（maxPval-d.pval）；}）
.attr（“transform”，函数（d）{return“translate（0），+yaxiscale（d.pval）+”）；}；
}
/*
*在此之后立即在函数中读取数据文件时调用。
*确保电源值是数字而不是字符串。
*确保时间戳是javascript日期对象。
*/
功能选择器（d）{
d、 pval=+d[“功率值]；
d、 date=dateFormatter.parse（d[“timestamp”]）；
返回d；
}
//读入数据文件。
d3.csv（“输出文件”、选择器、函数（错误、数据）{
//检查错误。
如果（错误）{
log（“读取csv文件时出错”）；
返回；
}
//设置maxPval
maxPval=d3.max（数据，函数（d）{返回d.pval；}）；
console.log（maxPval）；
初始轴（数据）；
初始条（数据）；
});
正文{
背景色：暗绿色；
}
.chart rect{
填充：黑色；
}
.图表文本{
填充：黑色；
字体：3px无衬线；
文本锚定：开始；
}
.轴文本{
字体：6px无衬线；
}
.轴线路径，
.轴线{
填充：无；
笔画：白色；
形状渲染：边缘清晰；
}

D3条形图
两件事：


在设置域之前，将轴指定给缩放。这是你问题的根源
你画栏杆很奇怪。用
g
将每个矩形包裹在
x
方向，然后使用
rect
设置
y
。这并没有破坏任何东西，但是定位矩形更容易
在缩放时不设置任何新的
x
位置

相关变化：

var zoom = d3.behavior.zoom()
  .on("zoom", zoomed);

...

function initAxes(data) {
  var xAxisExtent = d3.extent(data, function(d) {
    return +d.date;
  });
  xAxisScale.domain([new Date(xAxisExtent[0]), new Date(xAxisExtent[1])]);
  yAxisScale.domain([0, d3.max(data, function(d) {
    return d.pval;
  })]);
  zoom.x(xAxisScale);
  zoom.y(yAxisScale);
  drawAxes();
}

...

function redrawBars() {
  chart.selectAll(".data_bar")
    .attr("transform", function(d) {
      return "translate("+(xAxisScale(d.date) + margin.left)+"," + yAxisScale(d.pval) + ")";
    })
    .attr("height", function(d) {
      return (height - yAxisScale(d.pval));
    });
}

全部加在一起