Html d3：带输入字段的画笔

我正在制作一个类似于演示的d3画笔。但是，我希望画笔包含

元素，当画笔移动时，

应该随之移动

这是可能的，也许是通过使用外来物体

试试这段代码

var bbox = gBrush.node().getBBox();
gBrush.select(".resize.e").append("foreignObject")
  .attr("x", -bbox.width)
  .attr("y", bbox.height)  
  .append("xhtml:body").append("xhtml:input").attr("size",4)
  .attr("type", "text")
  .html("Object in SVG");

var保证金={
前200名，
右:40,，
底数：200，
左：40
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.time.scale（）
.domain（[新日期（2013年2月1日），新日期（2013年2月15日）-1]）
.范围（[0，宽度]）；
var brush=d3.svg.brush（）
.x（x）
.范围（[新日期（2013年2月2日），新日期（2013年2月3日）]）
.在（“刷子”，刷子）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“rect”）
.attr（“类”、“网格背景”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
svg.append（“g”）
.attr（“类”、“x网格”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（d3.time.hours，12）
.1尺寸（高度）
.tick格式（“”）
.selectAll（“.tick”）
.分类（“次要”，功能（d）{
返回d.getHours（）；
});
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（d3.时间.天）
.1（0））
.selectAll（“文本”）
.attr（“x”，6）
.style（“文本锚定”，null）；
var gBrush=svg.append（“g”）
.attr（“类”、“刷”）
.打电话（刷子）；
var bbox=gBrush.node（）.getBBox（）；
gBrush.select（“.resize.e”）.append（“外来对象”）
.attr（“x”，-bbox.width）
.attr（“y”，箱高）
.append（“xhtml:body”）.append（“xhtml:input”）.attr（“size”，4）
.attr（“类型”、“文本”）
.html（“SVG中的对象”）；
gBrush.selectAll（“rect”）
.attr（“高度”，高度）；
函数brushed（）{
var extent0=brush.extent（），
扩展1；
//如果拖动，请保留范围的宽度
如果（d3.event.mode==“移动”）{
var d0=d3.时间.日.轮（扩展0[0]），
d1=d3.时间.日期.偏移量（d0，数学四舍五入（（extnt0[1]-extnt0[0]）/864e5））；
extent1=[d0，d1]；
}
//否则，如果调整大小，则将两个日期四舍五入
否则{
extent1=extent0.map（d3.time.day.round）；
//如果圆形时为空，则使用地板和天花板
if（extent1[0]>=extent1[1]）{
extent1[0]=d3.时间.日期.楼层（extent0[0]）；
extent1[1]=d3.time.day.ceil（extent0[1]）；
}
}
d3.选择（this.call）（brush.extent（extent1））；
}

.axis文本{
字体：11px无衬线；
}
.轴路径{
显示：无；
}
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.网格背景{
填充：#ddd；
}
.网格线，
.网格路径{
填充：无；
冲程：#fff；
形状渲染：边缘清晰；
}
.grid.minor.tick行{
笔画不透明度：.5；
}
.刷{
行程：#000；
填充不透明度：.125；
形状渲染：边缘清晰；
}

---

谢谢您的帮助！出于某种原因，除非我给foreignobject一个明确的宽度和高度，否则输入不会出现，你知道为什么吗？