Question

添加缩放行为

我创建了这样的行为：

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);

（我看到类似this similar question的东西）。在我的例子中，msBars是我将数据绑定到行并缩放它们的部分。但我不确定它做了什么，在这里感觉不太好。

那么，如何应用重绘数据的功能呢？

Answer 1

您完全按照首先绘制数据的方式执行相同操作，减去.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) )

我还将你所选择的类应用于创建的元素，以便选择起作用。完整示例here。

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

1 个答案: