如何在d3.js缩放后重新绘制数据

我正在尝试向此添加缩放行为

我创造了这样的行为：

zoomed = ->
  svgContainer.select(".x.axis").call xAxis
  svgContainer.select(".y.axis").call yAxis
  svgContainer.select(".line.matched_peak").attr("d", msBars);

zoom = d3.behavior.zoom()
                 .x(xScale)
                 .y(yScale)
                 .scaleExtent([1, 10])
                 .on("zoom", zoomed)

svgContainer.call zoom

其中已定义了缩放函数

所以它可以重新绘制和重新缩放两个轴，但是如何才能重新绘制数据（这里的线）？我试着用这条线来做这件事

      svgContainer.select(".line.matched_peak").attr("d", msBars);

（我看到了类似的情况）。在我的例子中，MSBAR是将数据绑定到线并缩放它们的部分。但我不确定它是干什么的，在这里感觉也不太好

---

那么，如何应用重画数据的函数呢？

您只需做与最初绘制数据相同的事情，减去

.append（）

。所以在你的情况下，那就是

svgContainer.selectAll("line.matched_peak")
    .attr("x1", (d) -> return xScale(d.m_mz) )
                    .attr("y1", h - padding)
                    .attr("x2", (d) -> return xScale(d.m_mz) )
                    .attr("y2", (d) -> return yScale(d.m_intensity) )
svgContainer.selectAll("text.matched_peak_label")
    .attr("x", (d) -> return xScale(d.m_mz) )
                       .attr("y", (d) -> return  yScale(d.m_intensity) )

---

我还将选择所基于的类应用于创建的元素，以便进行选择。完整的示例。

这无疑让我走上了正确的道路，但是您知道是否有一个函数可以设置缩放的边界或限制？因为我现在看到一些线超出了x轴和y轴…你可以像中一样限制缩放/平移。而且，对于平移，我看到我可以向上平移图形，使y值低于0。。。有没有办法防止这种情况发生？