【问题标题】:In my d3 chart, Zoom selection disappears when I change the brush and click on not selected range在我的 d3 图表中,当我更改画笔并单击未选择的范围时,缩放选择消失了
【发布时间】:2020-04-15 22:56:11
【问题描述】:

在我的 d3 图表中,当我更改画笔并单击未选择的范围时,缩放选择消失了。

这是我的工作代码 - https://codesandbox.io/s/eager-shirley-cxq99

当我更改上面的选择并单击未选择的选择时,缩放选择消失了。

请指导我的代码有什么问题。

【问题讨论】:

  • 这可能是因为一旦您更改了上面的选择,未选择的区域就是您可以单击并拖动并松开以创建新选择区域的地方。你不想这样吗?
  • @Coola,这应该是我们想要单击并拖动以创建新选择,但如果我只单击它不应该隐藏选择,直到我单击并拖动到某个选择,在下面的 URL 中你可以检查我试图实现的预期行为。 bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f
  • 我对你的最终目标有点困惑。能否请您详细说明一下?
  • 我想你的意思是为什么绿色覆盖消失了?
  • @Coola 没错,

标签: javascript d3.js


【解决方案1】:

只需在您的代码中取消注释此部分即可实际生成缩放矩形,该矩形将在 brushed 函数中使用。

    svg
      .append("rect")
      .attr("class", "zoom")
      .attr("width", containerWidth - 20)
      .attr("height", height)
      .attr("transform", "translate(0,20)")
      .call(zoom);

查看工作codesandbox.io

【讨论】:

  • 我得到了问题,谢谢,我没有强烈添加缩放,因为我不希望用户使用光标从图表中进行缩放。所以我没有打电话给.call(zoom); 但正因为如此,我在点上的图表点击功能不起作用。
  • 修改代码 - codesandbox.io/s/eager-shirley-cxq99 scatter .append("rect") .attr("class", "zoom") .attr("width", containerWidth - 20) .attr("height", height) .attr("transform", "translate(0,20)");svg 更改为 scatter 并且它正在工作,并将此代码移至 scatter .selectAll(".rect-elements") 此代码之前。我没有打电话给.call(zoom) 对吗?
  • 问题是否正确取决于您的最终目标是什么。它似乎对你有用,我也没有看到任何错误。如果您不需要缩放,请不要调用它。
  • 你能帮我解决这个问题吗? stackoverflow.com/questions/66558856/…
猜你喜欢
  • 2012-03-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-26
  • 1970-01-01
  • 1970-01-01
  • 2023-03-24
相关资源
最近更新 更多