Javascript 在水平条形图中放大画笔

在我下面的代码中，我成功地使画笔与缩放事件同步移动，但现在我一直在尝试在使用画笔时使条形图正确缩放

我已经根据答案建立了我的

brush

函数，但无法将逻辑转换为我自己的代码

我得到错误：无法读取未定义的属性“transform”，我不知道为什么

以下是我所有的代码：

const数据=[
{月份：“一月”，数值：12}，
{月份：“二月”，值：25}，
{月份：“三月”，数值：10}，
{月份：“四月”，数值：15}
];
var svg=d3。选择（“svg”），
边距={顶部：10，右侧：35，底部：10，左侧：35}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var g=svg.append（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//==巴===
var x=d3.scaleLinear（）
.domain（[0，d3.max（数据，d=>d.value）]）.nice（）
.范围（[margin.left*2，宽度]）
变量y=d3.scaleBand（）
.domain（data.map（d=>d.month））
.范围（[高度，0]）
.填充（0.1）
var yAxis=g=>g
.attr（“transform”，translate（${margin.left*2}，0）`）
.call（d3.Axisleet（y）.ticksizeout（0））
g、 附加（“g”）。选择全部（“条形”）
.data（data.enter（）.append（“rect”）
.attr（“填充”、“钢蓝”）
.attr（“类”、“条”）
.attr（“x”，x（0））
.attr（“y”，d=>y（d.month））
.attr（“宽度”，d=>x（d.value）-x（0））
.attr（“高度”，y.带宽（））；
g、 附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
//==刷子===
var xB=d3.scaleLinear（）
.domain（[0，d3.max（数据，d=>d.value）]）
.范围（[0，左边距]）；
var yB=d3.scaleBand（）
.domain（data.map（d=>d.month））
.范围（[高度，0]）
.填充（0.1）；
var brush=d3.brushY（）
.范围（[[0,0]，[margin.left，height]]
.on（“开始刷”，刷过）；
var yAxisB=g=>g
.call（d3.axisLeft（yB.ticksizeout（0））
g、 附加（“g”）
.attr（“类”、“刷”）
.呼叫（刷子）
.call（brush.move，yB.range（）.reverse（））
g、 附加（“g”）。选择全部（“刷条”）
.data（data.enter（）.append（“rect”）
.attr（“填充”、“钢蓝”）
.attr（“类”、“刷条”）
.attr（“x”，xB（0））
.attr（“y”，d=>yB（d.month））
.attr（“宽度”，d=>xB（d.value）-xB（0））
.attr（“高度”，yB.bandwidth（））；
g、 附加（“g”）
.call（yAxisB）；
//==笔刷和缩放===
var bExtent=[[0,0]，[width，height]]
var zoom=d3.zoom（）
.scaleExtent（[1,2]）
.translateExtent（bExtent）
.范围（bExtent）
.on（“缩放”，缩放）
g、 附加（“rect”）
.attr（“类”、“缩放”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.呼叫（缩放）；
函数缩放（）{
if（d3.event.sourceEvent&&
d3.event.sourceEvent.type==“笔刷”）返回；
var t=d3.event.transform；
y、 范围（[高度，0]
.map（d=>d3.event.transform.applyY（d））；
g、 选择全部（“.bar”）
.attr（“y”，d=>y（d.month））
.attr（“高度”，y.带宽（））；
g、 选择全部（“.y轴”）。调用（yAxis）；
g、 选择（“.brush”）.call（brush.move，
yB.range（）.reverse（）.map（t.inversy，t））
}
函数brushed（）{
if（d3.event.sourceEvent&&
d3.event.sourceEvent.type==“缩放”）返回；
var s=d3.event.selection，
nD=[]；
yB.domain（）.forEach（（d）=>{
var pos=yB（d）+yB.bandwidth（）/2；
如果（位置>s[0]&位置y（d.month））
.attr（“高度”，y.带宽（））；
//g、 选择（“.zoom”）.call（zoom.transform，d3.zoomIdentity
//.比额表（2）
//.translate（-s[0]，0））；
}

.zoom{
光标：移动；
填充：无；
指针事件：全部；
}

---

首先，我不了解您描述的错误

代码片段中的问题似乎是刷出的条堆积在SVG的顶部。这是因为您正在更改

y

scale的域，并且由于这一事实，一些条形图在

y（d.month）

时得到了

未定义的

。因此，它们不是很好地从视图中消失，而是简单地绘制在

y

位置的

0

最好的选择是重新考虑所有笔刷/缩放代码。但是，为了使代码的更改最小化，一个快速而肮脏的解决方案是简单地将

未定义的
条旋转为
y
位置透明：

.style("opacity", d => y(d.month) ? 1 : 0)

另外，使
指针事件：无用于画笔中的条形图，可提供更好的用户体验：

.attr("pointer-events", "none")

以下是更改后的代码：


const数据=[{
月份：“一月”，
价值：12
},
{
月份：“二月”，
价值：25
},
{
月份：“三月”，
数值：10
},
{
月份：“四月”，
价值：15
}
];
var svg=d3。选择（“svg”），
保证金={
前10名，
右：35，
底部：10，
左：35
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var g=svg.append（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//==巴===
var x=d3.scaleLinear（）
.domain（[0，d3.max（数据，d=>d.value）]）.nice（）
.范围（[margin.left*2，宽度]）
变量y=d3.scaleBand（）
.domain（data.map（d=>d.month））
.范围（[高度，0]）
.填充（0.1）
var yAxis=g=>g
.attr（“transform”，translate（${margin.left*2}，0）`）
.call（d3.Axisleet（y）.ticksizeout（0））
g、 附加（“g”）。选择全部（“条形”）
.data（data.enter（）.append（“rect”）
.attr（“填充”、“钢蓝”）
.attr（“类”、“条”）
.attr（“x”，x（0））
.attr（“y”，d=>y（d.month））
.attr（“宽度”，d=>x（d.value）-x（0））
.attr（“高度”，y.带宽（））；
g、 附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
//==刷子===
var xB=d3.scaleLinear（）
.domain（[0，d3.max（数据，d=>d.value）]）
.范围（[0，左边距]）；
var yB=d3.scaleBand（）
.domain（data.map（d=>d.month））
.范围（[高度，0]）
.填充（0.1）；
var brush=d3.brushY（）
.范围([
[0, 0],
[左边距，高度]
])
.on（“开始刷”，刷过）；
var yAxisB=g=>g
.电话（d）