问

将d3缩放scaleExtent设置为正值

发布于 2023-01-29 14:58

svg

select

match

int

好吧,首先,这里有一个jsfiddle来说明我想问的问题

所以我试图实现缩放行为.我设法通过设置一个转换到缩放功能来限制缩放(我真的不太明白,从另一个SO问题得到它),以及缩放行为的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)？

什么功能可以用来避免线条超出轴线？当我在缩放中使用translate函数时,这不是隐含的吗？

1 个回答

比例以几何系列进行 - 也就是说,1之前的比例步长不是0,而是0.5.将您的比例范围限制为

.scaleExtent([0.5, 10])

应该做你想做的事.我还添加.nice()了您的比例定义以获得最终的数字.

至于剪辑,不,这不是隐含在翻译中.您需要使用剪辑路径显式剪辑,在您的情况下可以定义如下.

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

在这里完成示例.

2023-01-29 15:00 回答

pengminglin1968

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签