D3.js 要在d3图表中固定原点吗

我试图把原点固定在一个固定点上。我想在同一点上固定x轴和Y0轴的比例，这样当图表动态更新时，它会自动固定。我已经静态地修复了它。。。

---

`

解决方案很简单：平移轴时使用两个刻度：

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + y(0) + ")")
    //your y scale here -----------------^
    .call(xAxis);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + x(0) + ", 0)")
    //your x scale here --------------^
    .call(yAxis);

以下是您更新的JSFIDLE：

和堆栈代码段中的相同代码：

var数据集=[{
时间:01:，
伊瓦尔：188，
酒吧：“0”，
颜色：“红色”
}, {
时间:02:，
伊瓦尔：63，
酒吧：“1”，
颜色：“深蓝”
}, {
时间:14,，
伊瓦尔：241，
酒吧：“0”，
颜色：“红色”
}, {
小时：-15，
伊瓦尔：241，
酒吧：“3”，
颜色：“绿色”
}, {
时间:19,，
伊瓦尔：241，
酒吧：“0”，
颜色：“红色”
}, {
时间:22,，
伊瓦尔：318，
酒吧：“3”，
颜色：“绿色”
}, {
小时：-08，
伊瓦尔：-118，
酒吧：“1”，
颜色：“深蓝”
}, {
时间:22,，
伊瓦尔：48岁，
酒吧：“0”，
颜色：“红色”
}, {
时间:21，
伊瓦尔：31岁，
酒吧：“1”，
颜色：“深蓝”
}, {
时间:12,，
伊瓦尔：38，
酒吧：“0”，
颜色：“红色”
}, {
时间:16,，
伊瓦尔：138，
酒吧：“3”，
颜色：“绿色”
}, {
时间:05:，
伊瓦尔：344，
酒吧：“1”，
颜色：“深蓝”
}, {
时间:08:，
伊瓦尔：218，
酒吧：“1”，
颜色：“深蓝”
}, {
时间:03:，
伊瓦尔：18岁，
酒吧：“0”，
颜色：“红色”
}, {
时间:18,，
伊瓦尔：78，
酒吧：“3”，
颜色：“绿色”
}, {
小时：-18，
伊瓦尔：98，
酒吧：“1”，
颜色：“深蓝”
}];
var w=500，
h=500，
顶部垫=20，
左_垫=100；
var x=d3.scale.linear（）
.domain（[d3.min（数据集，函数（d））{
返回d.hour；
})，d3.max（数据集，函数（d）{
返回d.hour；
})])
.范围（[左焊盘，w-左焊盘]，
y=d3.刻度.线性（）
.domain（[d3.min（数据集，函数（d））{
返回d.yval；
})，d3.max（数据集，函数（d）{
返回d.yval；
})])
.范围（[h-顶部焊盘，顶部焊盘]）；
var svg=d3.选择（“主体”）
.append（“svg:svg”）
.attr（“宽度”，w+左焊盘）
.attr（“高度”，h+顶部垫）；
变量符号类型={
“triangleUp”：d3.svg.symbol（）.type（“triangle up”），
“圆”：d3.svg.symbol（）.type（“圆”），
“diamond”：d3.svg.symbol（）.type（“diamond”），
};
svg.selectAll（“路径”）
.数据（数据集）
.enter（）.append（“路径”）
.attr（“类”、“点”）
.attr（“转换”，函数（d）{
返回“translate”（“+x（d.hour）+”，“+y（d.yval）+”）；
})
.attr（“d”，函数（d，i）{
如果（d.bar==“0”）
返回symbolTypes.circle（）；
否则，如果（d.bar==“1”）
返回symbolTypes.triangleUp（）；
其他的
返回symbolTypes.diamond（）；
})
.样式（“填充”，功能（d）{
返回d.color；
});
var xAxis=d3.svg.axis（）.scale（x）.orient（“底部”），
yAxis=d3.svg.axis（）.scale（y）.orient（“左”）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）、+y（0）+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“平移”（+x（0）+”，0）
.呼叫（yAxis）
。轴路径，
.轴线{
填充：无；
冲程：#aaa；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：无衬线；
字体大小：11px；
}

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + y(0) + ")")
    //your y scale here -----------------^
    .call(xAxis);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + x(0) + ", 0)")
    //your x scale here --------------^
    .call(yAxis);