D3.js 坚持使用D3V3缩放行为文档

我是D3库的新手，我一直在用图形缩放

我在几个图表上正确显示我的数据。但当我放大时，一切都出错了。我不知道我是否错过了一些域或范围或任何东西。。。所以我问

您可以在此处找到我的代码演示：

下面是JSFIDLE示例：

我的JS代码在那里：

var margin={top:30，right:150，bottom:30，left:50}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//将日期解析为CSV格式的步骤
var parseDate=d3.time.format（“%Y/%m/%d-%H:%m”）.parse；
var format=d3.time.format（“%d/%m/%y-%H:%m”）；
var x=d3.time.scale（）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var color=d3.scale.category10（）；
var xAxis=d3.svg.axis（）.scale（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）.scale（y）
.方向（“左”）/*.刻度（30）*/；
var zoom=d3.behavior.zoom（）
.x（x）
.scaleExtent（[1,2]）
.打开（“缩放”，功能（缩放、平移）{
console.log（“函数缩放”）；
console.log（缩放）；console.log（翻译）；
缩放（缩放、平移）；
});
//线路发生器。
var line=d3.svg.line（）
.插入（“基础”）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.value）；}）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.append（“svg:g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.呼叫（缩放）；
svg.append（“rect”）
.attr（“类”、“窗格”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//获取数据
d3.csv（“./enregistrement-subset2.csv”），函数（数据）{
color.domain（d3.keys（数据[0]）
.filter（函数（键）{
返回键！==“日期”&&key！==“ECS-按钮A”；
}));
data.forEach（函数（d）{
//解析日期
d、 日期=解析日期（d.date）；
});
var dataSet=color.domain（）.map（函数（名称）{
返回{
姓名:姓名,，
值：data.map（函数（d）{
//使用“+”运算符解析数字
如果（名称=“CO2室”）{
返回{date:d.date，值：（+d[name]）/10}；
}
否则{
返回{date:d.date，值：+d[name]}；
}
})
};
});
//缩放数据的范围
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 领域([
d3.min（数据集，函数（c）{var mini=d3.min（c.values，函数（v）{return v.value；}）；return mini；}），
max（数据集，函数（c）{var maxi=d3.max（c.values，函数（v）{return v.value；}）；返回maxi；}）
]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“价值”）；
var valueSet=svg.selectAll（“.valueSet”）
.数据（数据集）
.enter（）.append（“g”）
.attr（“类别”、“价值集”）；
valueSet.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，函数（d）{返回行（d.values）；}）
.style（“笔划”，函数（d）{返回颜色（d.name）；}）
.呼叫（线路）；
valueSet.append（“文本”）
.datum（函数（d）{return{name:d.name，value:d.values[d.values.length-1]}；}）
.attr（“transform”，函数（d）{return”translate（“+x（d.value.date）+”，“+y（d.value.value）+”）；）
.attr（“x”，3）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.name；}）；
//缩放（）；
});
函数缩放（）{
console.log（“此处”，d3.event）；
svg.select（“g.x.axis”）.call（xAxis）；
svg.select（“g.y.axis”）.call（yAxis）；
//svg.selectAll（“path.line”）.call（line）；
svg.selectAll（“path.line”）.attr（“d”，line）；
//d3.选择（“#页脚跨距”）.text（“临时页面：”+x.domain（）.map（format.join）（-”）；
}

有人能告诉我这个代码有什么问题吗

我应该重新设计吗

---

如果我使用大量数据，是否有性能问题需要预览？我应该怎么做？

这可能很有用，适用于最新版本的d3：

---

这是因为你的x轴是时间。

当你问这样的问题时，你应该为你的例子创建一个时间轴。它使回答问题的人更容易看到您的代码示例实时运行并易于编辑。如果我能帮上忙，那就不必了，但请看下面的帖子：@seliopou谢谢，我编辑了这篇文章以添加JSFIDLElink@CristianG谢谢事实上，我认为这可能比在那里做的更简单。我正在做这件事，这有助于我了解这一切是如何进行的。谢谢。实际上我已经在我的代码中使用了它。但我找不到一个关于如何做这一点和添加线绘制图形的清晰文档。我研究了你编写的代码，但对其中所做的一切我有点不知所措。你有关于这件事的其他文件吗？即使只是你学习过的文档的链接？抱歉，关于缩放和平移的文档不是很好（就像我的英语lol一样糟糕），我可以帮助我学习，我的第一个建议是查看你的代码以更改epoch time（）的日期格式。谢谢你的回答。我已经很久没有试着去做这件事了。我现在没有很多时间来测试这个，但我会在下周检查它。

var zoom = d3.behavior.zoom()
    .x(x)
    **.scaleExtent([1, 2])**    <---
    .on("zoom", function(scale, translate){
        console.log("fonction zoom");
        console.log(scale); console.log(translate);
        zoomed(scale, translate);
    });

var zoom = d3.behavior.zoom()
    .x(x)
    .on("zoom", function(scale, translate){
        console.log("fonction zoom");
        console.log(scale); console.log(translate);
        zoomed(scale, translate);
    });