Javascript 在D3V4中制作可拖动的堆叠条形图时，我遇到了一些问题。我面临的主要问题是拖动时svg的翻译

这是我为drag编写的代码，其中xDrag和xDrag1是调用drag的元素。对于整个工作代码，请访问小提琴

您不需要玩

start\u x_old

和

start\u x_new

只需为您的选择设置一个基准：

var drag = d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended)

        function dragstarted(d) {
            d3.event.sourceEvent.stopPropagation();
            d3.event.sourceEvent.preventDefault;
            start_x_old = +d3.event.x;

        }
        function dragged(e) {
                xDrag.attr("transform", "translate(" + [( d3.event.x - start_x_old), 0] + ")");
                xDrag1.attr("transform", "translate(" + [(d3.event.x - start_x_old), height] + ")");
        }

        function dragended(d) {
        start_x_new = event.clientX;
        console.log("old`enter code here`", start_x_old);
        console.log("new", start_x_new);
            //for future use
        }`

并将其用于拖动：

var xDrag = svg.selectAll(".serie")
    .datum({x: 0})
    .call(drag);
var xDrag1 = svg.selectAll(".axis--x")
    .datum({x: 0})
    .call(drag);

这是你最新的小提琴：

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

var start_x_old，start_x_new=0，
x_diff，x翻译，
svg=d3。选择（“svg”），
保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
风险值数据=[{
标签名称：“财务数据”，
编号:27,，
是：10
}, {
标签名称：“生产和完工数据”，
编号:24,，
是：32
}, {
标签名称：“支持中心数据”，
编号:18,，
是：21
}];
/*var drag=d3.drag（）
.on（'start.interrupt'，函数（）{
xDrag.interrupt（）；
xDrag1.interrupt（）；
})
.on（'开始拖动'，函数（）{
xDrag.attr（“转换”、“转换”（+（d3.event.x）+）、“+0+”）
xDrag1.attr（“转换”、“转换”（+（d3.event.x）+）、“+height+”）
});*/
var drag=d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.开启（“结束”，绘图）
函数dragstarted（d）{
d3.event.sourceEvent.stopPropagation（）；
d3.event.sourceEvent.preventDefault；
}
函数（d）{
//控制台日志（“拖动”）；
//x_diff=开始x_旧-开始x_新；
xDrag.attr（“转换”、“转换”（+[（d.x=d3.event.x），0]+”）；
xDrag1.attr（“转换”、“转换”（+[（d.x=d3.event.x），高度]+”）；
}
函数d（d）{
xDrag.datum({
x:d3.event.x
});
xDrag1.1基准面({
x:d3.event.x
});
}
数据排序（函数（a，b）{
返回（是+否）-（是+否）；
});
var x=d3.scaleBand（）
.rangeRound（[0，宽度]）
.填充（0.1）
.对齐（0.1）；
变量y=d3.scaleLinear（）
.rangeRound（[高度，0]）；
var z=d3.scaleOrdinal（）
.范围（['42c8c5'，'d05a59']）；
var stack=d3.stack（）；
数据排序（函数（a，b）{
返回（是+否）-（是+否）；
});
x、 域（data.map）（函数（d）{
返回d.labelName；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回（d.是+d.否）；
})]).nice（）；
z、 域（Object.keys（数据[0]）.slice（1））；
g、 全选（“.serie”）
.data（stack.keys（Object.keys（数据[0]）.slice（1））（数据））
.enter（）.append（“g”）
.attr（“类别”、“系列”）
.attr（“填充”，功能（d）{
返回z（d键）；
})
.selectAll（“rect”）
.数据（功能（d）{
返回d；
})
.enter（）.append（“rect”）
.attr（“x”，函数（d）{
返回x（d.data.labelName）；
})
.attr（“y”，函数（d）{
返回y（d[1]）；
})
.attr（“高度”，功能（d）{
返回y（d[0]）-y（d[1]）；
})
.attr（“宽度”，x.带宽（））；
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“变换”、“旋转（-60）”）；
g、 附加（“g”）
.attr（“类”、“轴--y”）
.call（d3.axisLeft（y）.ticks（10，“s”））
.append（“文本”）
.attr（“x”，2）
.attr（“y”，y（y.ticks（10.pop（）））
.attr（“dy”，“0.35em”）
.attr（“文本锚定”、“开始”）
.attr（“填充”和“#000”）；
var xDrag=svg.selectAll（“.serie”）
.基准({
x:0
})
.呼叫（拖动）；
var xDrag1=svg.selectAll（“.axis--x”）
.基准({
x:0
})
.呼叫（拖动）
.bar{
填充：钢蓝；
}
.轴路径{
显示：无；
}


function dragged(d) {
    xDrag.attr("transform", "translate(" + [(d.x = d3.event.x), 0] + ")");
    xDrag1.attr("transform", "translate(" + [(d.x = d3.event.x), height] + ")");
}