D3.js 缩放缩放带

我目前正在使用D3V4。我的x刻度是一个缩放带，其中我使用一个国家的名称作为显示，我的y刻度是scaleTime。当我试图在zoom函数中获得一个新的xScale时，它在rescaleX上抛出了一个错误。我在网上查看了许多示例，但它们都有线性刻度或刻度时间

var countryArr = ["USA", "UK", "Poland", "Sweden"];
var firstDay = moment(day).subtract(1, 'days').toDate();
var lastDay = moment(day).add(1, 'days').toDate();

// define scale
var yScale = d3.scaleTime().range([0, width]); 
yScale.domain([firstDay, lastDay]);
var xScale = d3.scaleBand().range([0, height]);
xScale.domain(countryArr);

// define zoom
var zoom = d3.zoom()
    .scaleExtent([1, 1])
    .translateExtent([[margin.left, margin.top], [width, height]])
    .on("zoom", zoomed);

d3.select("#main-canvas").call(zoom);

function zoomed() {
    //console.log(d3.event.transform.y);
    var new_x = d3.event.transform.rescaleX(xScale);  // ERROR at this line
    var new_y = d3.event.transform.rescaleY(yScale); 
}

---

在顺序（定性）量表中使用

rescaleX

没有什么意义。问题很清楚：

返回其域已转换的连续缩放的副本。这是通过首先在尺度范围上应用逆x变换来实现的，然后应用逆尺度来计算相应的域。（强调矿山）

还有，博斯托克（D3创作者）说

。。。缩放行为会影响附着比例的域，但在平移和缩放时修改顺序比例的域没有意义，因为域是离散的

您可以做的是创建几何缩放而不是语义缩放

这是一个演示，我使用条形图添加几何缩放：

var svg=d3.选择（“svg”），
保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var x=d3.scaleBand（）.rangeRound（[0，宽度]）.padding（0.1），
y=d3.scaleLinear（）.rangeRound（[height，0]）；
var g=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
风险值数据=[{
“信”：“A”，
“频率”：0.08167
}, {
“信”：“B”，
“频率”：0.01492
}, {
“信”：“C”，
“频率”：0.02782
}, {
“信”：“D”，
“频率”：0.04253
}, {
“信”：“E”，
“频率”：0.12702
}, {
“信”：“F”，
“频率”：0.02288
}, {
“字母”：“G”，
“频率”：0.02015
}, {
“字母”：“H”，
“频率”：0.06094
}, {
“信”：“我”，
“频率”：0.06966
}, {
“信”：“J”，
“频率”：0.00153
}, {
“字母”：“K”，
“频率”：0.00772
}, {
“字母”：“L”，
“频率”：0.04025
}, {
“字母”：“M”，
“频率”：0.02406
}, {
“字母”：“N”，
“频率”：0.06749
}, {
“信”：“O”，
“频率”：0.07507
}, {
“字母”：“P”，
“频率”：0.01929
}, {
“信”：“Q”，
“频率”：0.00095
}, {
“字母”：“R”，
“频率”：0.05987
}, {
“信”：“S”，
“频率”：0.06327
}, {
“字母”：“T”，
“频率”：0.09056
}, {
“字母”：“U”，
“频率”：0.02758
}, {
“字母”：“V”，
“频率”：0.00978
}, {
“字母”：“W”，
“频率”：0.0236
}, {
“字母”：“X”，
“频率”：0.0015
}, {
“字母”：“Y”，
“频率”：0.01974
}, {
“字母”：“Z”，
“频率”：0.00074
}];
x、 域（data.map）（函数（d）{
回信；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.frequency；
})]);
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
g、 附加（“g”）
.attr（“类”、“轴--y”）
.call（d3.axisLeft（y）.ticks（10，“%”）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“0.71em”）
.attr（“文本锚定”、“结束”）
.文本（“频率”）；
g、 选择全部（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d.letter）；
})
.attr（“y”，函数（d）{
返回y（d.频率）；
})
.attr（“宽度”，x.带宽（））
.attr（“高度”，功能（d）{
返回高度-y（d.频率）；
});
var rect=g.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“不透明度”，0）
.call（d3.zoom（）
.scaleExtent（[1,10]）
。打开（“缩放”，缩放））；
函数zoom（）{
g、 attr（“transform”，d3.event.transform）；
}

.bar{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
.轴--x路径{
显示：无；
}

---

正如@gerardofurtado所解释的那样，重缩放功能对于顺序缩放几乎没有作用。但这里有一个小技巧，我喜欢用它来缩放有序轴的图形。本质上，它独立缩放轴，然后反向缩放轴的组件（线和文本），以便它们不会扭曲：

.酒吧{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
.轴--x路径{
显示：无；
}
var svg=d3。选择（“svg”），
保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var zoom=d3.zoom（）
.scaleExtent（[1，无穷大]）
.翻译范围([
[0, 0],
[宽度、高度]
])
.范围([
[0, 0],
[宽度、高度]
])
。打开（“缩放”，缩放）；
调用（缩放）；
var x=d3.scaleBand（）.rangeRound（[0，宽度]）.padding（0.1），
y=d3.scaleBand（）.rangeRound（[height，0]）。padding（0.1）；
var g=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var defs=g.append（'defs'）；
蔑视
.append（'clipPath'））
.attr（'id'，'clip'）
.append（'rect'）
.attr（'x'，0）
.attr（'y'，0）
.attr（'width'，width）
.attr（'高度'），高度；
蔑视
.append（'clipPath'））
.attr（'id'，'clipx'）
.append（'rect'）
.attr（'x'，0）
.attr（'y'，高度）
.attr（'width'，width）
.attr（高度、边距、底部）；
蔑视
.append（'clipPath'））
.attr（'id'，'clipy'）
.append（'rect'）
.attr（'x'，-margin.left）
.attr（'y'，-10）
.attr（'width'，margin.left+1）
.attr（'高度'，高度+15）；
风险值数据=[{
“信”：“A”，
“频率”：“Z”
}, {
“信”：“B”，
“频率”：“Y”
}, {
“信”：“C”，
“频率”：“X”
}, {
“信”：“D”，
“频率”：