d3拖动行为在html元素上无法正常工作

我想在一个表中显示多个图表，每个图表都是一个单独的svg，由d3生成

每个图表的高度都必须易于调整——我希望这一点可以像调整JSFIDLE中的4个面板（html、javaScript、css、output）一样，通过在这些面板之间的边框上拖动鼠标来实现——在我的例子中，这只是水平边框

我想使用d3.behavior.drag（）。当拖动边框（表的td中的div或类似内容）时，一些svg元素的高度必须改变。到目前为止，我在代码中使用了简单的div而不是svg，以保持简单

我有两个版本；一个“应该”工作，但没有，另一个正在工作，但我不喜欢（它使用d3.mouse（），这“应该”是不必要的复杂）；我想知道我是否在d3中发现了一个bug，或者（更有可能的是），我在“应该”工作的版本中做得不对

瞧，工作版本；要查看不工作的版本（其中出现“抖动”），请调用_dragmove而不是dragmove（其中显示的是

.on（“拖动”…）

）

var heights、xElt、yElt、dxElt、dyElt、datumXElt、datumYElt、mouseElt、bodyMouseElt、body、drag、spacer；
heights=d3.selectAll（“.content”）[0].map（函数（elt）{return parseInt（d3.select（elt）.style（“heights”）；}）；
xElt=d3。选择（“#xLog”）；
yElt=d3。选择（“#yLog”）；
dxElt=d3。选择（“dxLog”）；
dyElt=d3。选择（“动态日志”）；
datumXElt=d3。选择（“datumXLog”）；
datumylet=d3。选择（#datumYLog”）；
mouseElt=d3。选择（“mouseLog”）；
bodyMouseElt=d3。选择（“bodymouselg”）；
theBody=d3。选择（“body”）.node（）；
drag=d3.behavior.drag（）
.origin（函数（x）{return x；}）
.打开（“拖动”，拖动）
.on（“dragstart”，功能（d）{
console.log（“开始”+d.index）；
y0=d3.小鼠（体）[1]；
})
.on（“dragend”，功能（d）{
控制台日志（“结束”+d.index）；
var newHeight=parseFloat（d3.select（“#content_uquo“+d.index”）.style（“height”）；
高度[d.指数]=新高度；
});
垫片=d3。选择全部（“div.spacer”）；
数据（d3.range（heights.length）.map（函数（d，i）{return{x:0，y:0，index:i}））；
间隔。调用（拖动）；
函数showDebugOutput（d，that）{
xElt.text（d3.event.x）；
yElt.text（d3.event.y）；
文本（d3.event.dx）；
dyElt.text（d3.event.dy）；
datumXElt.text（d.x）；
日期文本（d.y）；
text（d3.mouse（that.join）（“，”）；
bodyMouseElt.text（d3.mouse（theBody.join）（“，”）；
}
//_不工作
功能拖动（d）{
showDebugOutput（d，this）；
var elt=d3.选择（“#内容"+d.索引）；
var原始高度=高度[d.指数]；
var newHeight=原始高度+d3.event.y；
英语风格（“高度”，新高度+“px”）；
d、 x=d3.event.x；
d、 y=d3.event.y；
elt.html（“
”+newHeight）；
}
功能拖动（d）{
showDebugOutput（d，this）；
var elt=d3.选择（“#内容"+d.索引）；
var原始高度=高度[d.指数]；
y1=d3.小鼠（体）[1]；
var dy=y1-y0；
var newHeight=原始高度+dy；
英语风格（“高度”，新高度+“px”）；
d、 x=d3.event.x；
d、 y=dy；
elt.html（“
”+newHeight）；
}

div.spacer{
宽度：400px；
高度：5px；
背景色：#ddd；
光标：ns调整大小；
位置：相对位置；
左：0；
排名：0；
}
部门内容{
宽度：400px；
}
第一组内容{
背景颜色：黄色；
高度：100px；
}
第二组内容{
背景颜色：绿色；
高度：200px；
}
第三组{
背景颜色：橙色；
高度：70像素；
}

x

y

dx

dy

datumX

日期

鼠标

体鼠

我无法在你的第一把小提琴上拖动任何东西（在Chrome上）。适合我-Chrome版本35。拖动的是表格单元格之间的边框。光标甚至会改变以指示这一点。无论如何，感谢div拖动演示！相关问题：