将 d3 缩放比例范围设置为正值

Question

嗯，首先，here is a jsfiddle 说明我想问什么

所以我正在尝试实现缩放行为。我设法通过设置缩放功能的转换来限制缩放，（我不太明白，刚从another SO question得到它）和缩放行为的 scaleExtent([1,10])

所以这是缩放行为：

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

这是缩放功能：

zoomed = ->

t = zoom.translate()
s = zoom.scale()

tx = t[0]
ty = t[1]

tx = Math.min(0, Math.max(w * (1-s), t[0]))
ty = Math.min(0, Math.max((h-padding) * (1-s), t[1]))

zoom.translate([tx, ty])

svgContainer.select("g.x.axis").call xAxis
svgContainer.select("g.y.axis").call yAxis

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

但是，将 scaleExtent 设置为

.scaleExtent([1, 10]),

使得永远不会显示 y 刻度中值为 1 的一个特定点（jsfiddle 左侧的第一个点）。 但是设置

.scaleExtent([0, 10])

禁用缩放限制，用户可以在 y 轴上缩放和平移到 0 以下。

也尝试过.scaleExtent([0.1, 10])，但这也允许缩放和平移低于 0。

那么我怎样才能只允许缩放到从 0 开始的正值（包括值 1）？

还有什么功能可以用来避免线显示超出轴？当我在缩放中使用翻译功能时，这不是隐含的吗？

Answer 1

刻度以geometric series 进行——也就是说，1 之前的刻度步长不是 0，而是 0.5。将规模范围限制为

.scaleExtent([0.5, 10])

应该做你想做的。我还在您的比例定义中添加了.nice()，以便在末尾获得整数。

至于剪辑，不，这在翻译中并不隐含。您需要使用clip path 显式剪辑，在您的情况下可以定义如下。

cp = svgContainer.append("defs").append("clipPath").attr("id", "cp")
        .append("rect")
        .attr("x", padding)
        .attr("y", padding)
        .attr("width", w - 2 * padding)
        .attr("height", h - 2 * padding)

你需要做的就是在添加元素时使用它：

msBars = svgContainer.selectAll('line.matched_peak')
                    .data(jsonFragmentIons)
                    .enter()
                    .append("line")
                    .attr("clip-path", "url(#cp)")

完整示例here。