javascript - D3js v4 画笔、缩放和点击时居中画笔-6ren

javascript - D3js v4 画笔、缩放和点击时居中画笔

转载作者：行者123 更新时间：2023-11-28 04:23:45

我正在使用 D3js v4。我想要实现的是根据 this 结合画笔和缩放行为单击以重新居中画笔的示例，其中单击后画笔会居中，并且画笔边界会以平滑过渡变圆。这是我的fiddle到目前为止。

我的问题是函数 Brushened 永远不会被执行。看起来缩放会阻止画笔接收 mouseup 事件。只有当通过注释掉所有缩放功能来完全禁用缩放时，我才能正常工作。我在 mousedown 上尝试了 event.stopPropagation 和 event.stopImmediatePropagation (如下面的代码片段所示)，以防止缩放接收 mousedown 和 mouseup 事件，但它不起作用。

context.append("g")
  .attr("class", "brush")
  .call(brush)
  .call(brush.move, [x2(new Date(2013, 0, 1)), x2(new Date(2013, 6, 1))])
  .selectAll(".overlay")
  .each(function(d) {
    d.type = "selection";
  })
  .on("mousedown touchstart", function() { d3.event.stopPropagation(); })
  .on("mousedown touchstart", brushcentered)

我是否将 stopPropagation 放置在错误的位置，或者我是否完全遗漏了某些内容？对此的任何帮助将不胜感激。

最佳答案

哇!这里进行了大量的事件处理。让我们分解一下，首先是这个调用:

 svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
   .scale(width / (s[1] - s[0]))
   .translate(-s[0], 0));

在您的 brushed 事件处理程序中，它正在吃掉您的 brushend。我的第一个想法是使用简单的 setTimeout hack允许brushend 进行处理。虽然这有效，但它只是导致了一个新问题，brushedend 中的 brush.move 随后被作为缩放事件引发，而不是在 brushed< 中处理。/。因此，我只是简单地将移动替换为缩放，并让缩放事件处理画笔定位，如下所示:

function brushended() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
  if (!d3.event.selection) return; // Ignore empty selections.

  var d0 = d3.event.selection.map(x2.invert), //=Datum, linker+rechter Brush-Rand
    d1 = d0.map(d3.timeMonth.round);

  // If empty when rounded, use floor & ceil instead.
  if (d1[0] >= d1[1]) {
    d1[0] = d3.timeMonth.floor(d0[0]);
    d1[1] = d3.timeMonth.offset(d1[0]);
  };

  var s = d1.map(x2);
  setTimeout(function(){
    svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .scale(width / (s[1] - s[0]))
      .translate(-s[0], 0));
  });
}

我认为这会产生您正在寻找的行为。

运行下面的代码并插入 here :

<!DOCTYPE html>
<html>

<head>
  <script src="https://d3js.org/d3.v4.js"></script>
  <style>
    #Type1 {
      stroke: DarkTurquoise;
    }
    
    #Type2 {
      stroke: steelblue;
    }
    
    .data-line {
      fill: none;
      stroke-width: 2.5;
      opacity: 0.8;
      stroke-linecap: round;
      clip-path: url(#clip);
      transition: 0.5s;
    }
    
    .context-line {
      fill: none;
      stroke-width: 1.5;
      stroke: grey;
      stroke-linecap: round;
      clip-path: url(#clip);
    }
    
    div.svg-container {
      display: inline-block;
      position: relative;
      width: 100%;
      height: 100%;
      vertical-align: top;
    }
    
    .zoom {
      cursor: move;
      fill: none;
      pointer-events: all;
    }
  </style>
</head>

<body>
    <div>
  </div>
  <script>
    var svg = d3.select("div")
      .append("div").classed("svg-container", true)
      .append("svg")
      .attr("width", 700)
      .attr("height", 400)

    var margin = {
        top: 20,
        right: 20,
        bottom: 130,
        left: 60
      },
      margin2 = {
        top: 300,
        right: 20,
        bottom: 30,
        left: 60
      },
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom,
      height2 = +svg.attr("height") - margin2.top - margin2.bottom;

    //    Achsen Datumsbehandlung
    var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");

    var x = d3.scaleTime().range([0, width]),
      x2 = d3.scaleTime().range([0, width]),
      y = d3.scaleLinear().range([height, 0]);
    y2 = d3.scaleLinear().range([height2, 0]);

    var xAxis = d3.axisBottom(x)
    xAxis2 = d3.axisBottom(x2),
      yAxis = d3.axisLeft(y);

    //Linien
    var line = d3.line()
      .x(function(d) {
        return x(d.Datum);
      })
      //    .y0(height) //nur area-chType
      .y(function(d) {
        return y(d.Summe);
      });
    //    .y1(function(d) { return y(d.Summe); }); //nur area-chType

    //Linien
    var lineType1 = d3.line()
      .curve(d3.curveStepAfter)
      .x(function(d) {
        return x(d.Datum);
      })
      .y(function(d) {
        return y(d.Summe);
      });

    var line2 = d3.line()
      .x(function(d) {
        return x2(d.Datum);
      })
      .y(function(d) {
        return y2(d.Summe);
      });

    svg.append("defs").append("clipPath")
      .attr("id", "clip")
      .append("rect")
      .attr("width", width)
      .attr("height", height);

    var focus = svg.append("g")
      .attr("class", "focus")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var context = svg.append("g")
      .attr("class", "context")
      .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

    //Zoom & Brush
    var brush = d3.brushX()
      .extent([
        [0, 0],
        [width, height2]
      ])
      .handleSize(10)
      .on("start brush", brushed)
      .on("end", brushended);

    var zoom = d3.zoom()
      .scaleExtent([1, 100])
      .translateExtent([
        [0, 0],
        [width, height]
      ])
      .extent([
        [0, 0],
        [width, height]
      ])
      .on("zoom", zoomed);

    // ===Daten===
    var data = [{
      "Datum": "2013-02-04 00:00:00",
      "Summe": "1000.00",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-02-04 00:00:00",
      "Summe": "200.00",
      "Type": "Type2",
      "Notizen": null
    }, {
      "Datum": "2013-02-21 00:00:00",
      "Summe": "4000.00",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-02-23 00:00:00",
      "Summe": "2000.00",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-02-23 00:00:00",
      "Summe": "601.00",
      "Type": "Type2",
      "Notizen": null
    }, {
      "Datum": "2013-03-04 00:00:00",
      "Summe": "775.00",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-03-04 00:00:00",
      "Summe": "1395.10",
      "Type": "Type2",
      "Notizen": null
    }, {
      "Datum": "2013-04-03 00:00:00",
      "Summe": "400.00",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-04-03 00:00:00",
      "Summe": "1040.00",
      "Type": "Type2",
      "Notizen": null
    }, {
      "Datum": "2013-05-24 00:00:00",
      "Summe": "400.00",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-05-24 00:00:00",
      "Summe": "3288.88",
      "Type": "Type2",
      "Notizen": null
    }, {
      "Datum": "2013-05-28 00:00:00",
      "Summe": "400.00",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-05-28 00:00:00",
      "Summe": "4407.10",
      "Type": "Type2",
      "Notizen": null
    }, {
      "Datum": "2013-06-01 00:00:00",
      "Summe": "400.00",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-06-01 00:00:00",
      "Summe": "3525.86",
      "Type": "Type2",
      "Notizen": null
    }, {
      "Datum": "2013-06-04 00:00:00",
      "Summe": "400.00",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-06-04 00:00:00",
      "Summe": "2990.17",
      "Type": "Type2",
      "Notizen": null
    }, {
      "Datum": "2013-06-10 00:00:00",
      "Summe": "390.00",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-06-10 00:00:00",
      "Summe": "366.00",
      "Type": "Type2",
      "Notizen": null
    }, {
      "Datum": "2013-06-14 00:00:00",
      "Summe": "390.00",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-06-14 00:00:00",
      "Summe": "925.18",
      "Type": "Type2",
      "Notizen": null
    }, {
      "Datum": "2013-06-16 00:00:00",
      "Summe": "708.44",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-06-16 00:00:00",
      "Summe": "609.10",
      "Type": "Type2",
      "Notizen": null
    }, {
      "Datum": "2013-06-20 00:00:00",
      "Summe": "708.44",
      "Type": "Type1",
      "Notizen": null
    }, {
      "Datum": "2013-06-20 00:00:00",
      "Summe": "1760.80",
      "Type": "Type2",
      "Notizen": null
    }]

    data.forEach(function(d) {
      d.Datum = parseDate(d.Datum);
      d.Summe = +d.Summe;
    });

    x.domain([d3.min(data, function(d) {
      return d.Datum;
    }), d3.max(data, function(d) {
      return d.Datum;
    })]).nice(d3.timeYear);
    y.domain([d3.min(data, function(d) {
      return d.Summe;
    }), 1.1 * d3.max(data, function(d) {
      return d.Summe;
    })]).nice();
    x2.domain(x.domain());
    y2.domain(y.domain());

    var dataGroup = d3.nest()
      .key(function(d) {
        return d.Type;
      })
      .entries(data);

    focus.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
       .call(zoom);

    focus.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    focus.append("g")
      .attr("class", "axis axis--y")
      .call(yAxis);

    focus.selectAll("path#Type2")
      .data(dataGroup)
      .enter()
      .append("path")
      .filter(function(d) {
        return d.key == "Type2"
      })
      .attr("class", "data-line")
      .attr("d", function(d) {
        return line(d.values);
      })
      .attr("id", function(d) {
        return d.key
      });

    focus.selectAll("path#Type1")
      .data(dataGroup)
      .enter()
      .append("path")
      .filter(function(d) {
        return d.key == "Type1"
      })
      .attr("class", "data-line")
      .attr("d", function(d) {
        return lineType1(d.values);
      })
      .attr("id", function(d) {
        return d.key
      });

    context.selectAll(".context-line")
      .data(dataGroup)
      .enter()
      .append("path")
      .attr("class", "context-line")
      .attr("d", function(d) {
        return line2(d.values);
      });

    context.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis2);

    context.append("g")
      .attr("class", "brush")
      .call(brush)
      .call(brush.move, [x2(new Date(2013, 0, 1)), x2(new Date(2013, 6, 1))])
      .selectAll(".overlay")
      .each(function(d) {
        d.type = "selection";
      })
      .on("mousedown touchstart", brushcentered);

    // ===Funktionen===

    function brushed() {
      if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
      var s = d3.event.selection || x2.range();
      x.domain(s.map(x2.invert, x2));
      focus.selectAll("path#Type1").attr("d", function(d) {
        return lineType1(d.values);
      });
      focus.selectAll("path#Type2").attr("d", function(d) {
        return line(d.values);
      });
      focus.select(".axis--x").call(xAxis);
      
      setTimeout(function(){
        svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
          .scale(width / (s[1] - s[0]))
          .translate(-s[0], 0));
      });
    }

    function brushcentered() {
      var dx = 30, // Use a fixed width when recentering, = ca 2 Monate
        cx = d3.mouse(this)[0],
        x0 = cx - dx / 2,
        x1 = cx + dx / 2;
      d3.select(this.parentNode).call(brush.move, x1 > width ? [width - dx, width] : x0 < 0 ? [0, dx] : [x0, x1]);
    }

    function brushended() {
      if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
      if (!d3.event.selection) return; // Ignore empty selections.

      var d0 = d3.event.selection.map(x2.invert), //=Datum, linker+rechter Brush-Rand
        d1 = d0.map(d3.timeMonth.round);

      // If empty when rounded, use floor & ceil instead.
      if (d1[0] >= d1[1]) {
        d1[0] = d3.timeMonth.floor(d0[0]);
        d1[1] = d3.timeMonth.offset(d1[0]);
      };

      var s = d1.map(x2);
      setTimeout(function(){
        svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
          .scale(width / (s[1] - s[0]))
          .translate(-s[0], 0));
      });
    }

    function zoomed() {
      if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return;
      var t = d3.event.transform;
      x.domain(t.rescaleX(x2).domain());
      focus.selectAll("path#Type1").attr("d", function(d) {
        return lineType1(d.values)
      });
      focus.selectAll("path#Type2").attr("d", function(d) {
        return line(d.values)
      });
      focus.select(".axis--x").call(xAxis);
      context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
    }
  </script>
</body>

</html>

关于javascript - D3js v4 画笔、缩放和点击时居中画笔，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45246500/

文章推荐： javascript - D3 - 在 svg 中将滚动应用到图例容器时出现问题

文章推荐： html - 如何设置行与行之间的间隙

文章推荐： jquery onclick 不起作用

文章推荐： c++ - 将 C++ 回调函数转换为 Delphi

检查用户输入的字符串在 C 中的格式为 "%d/%d/%d/%d/%d"
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
java - 使用此表单获取号码\d\s\d\d\s\d
我试图用这种形式简单地获取数字 28 integer+space+integer+integer+space+integer我试过这个正则表达式 \\s\\d\\d\\s 但我得到了两个数字11 和
d - D 语言是否完全依赖于 D 运行时？
最近一直在学习D语言。我一直对运行时感到困惑。从我能收集到的关于它的信息中，(这不是很多)我知道它是一种有助于 D 的一些特性的运行时。像垃圾收集一样，它与您自己的程序一起运行。但是既然 D 是编译
java - 这两种语法\\d\\d\\d 和\\d{3} 在所有环境中都一样吗？
想问一下这两个正则表达式有区别吗？ \d\d\d 与 \d{3} 我已经在我的本地机器上使用 Java 和 Windows 操作系统对此进行了测试，两者都工作正常并且结果相同。但是，当在 linux
go - 为什么我不能执行 fmt.Sprintf ("%d.%d.%d.%d"，一个...)？
我正在学习 Go，而且我坚持使用 Go 之旅(exercise-stringer.go:https://tour.golang.org/methods/7)。这是一些代码: type IPAddr
java - Java中的正则表达式: Pattern.编译( "J.*\\d[0-35-9]-\\d\\d-\\d\\d")
我在Java正则表达式中发现了一段令我困惑的代码: Pattern.compile( "J.*\\d[0-35-9]-\\d\\d-\\d\\d" ); 要编译的字符串是: String string
ruby - gsub(/(\d{4})\/(\d\d)\/(\d\d)\/(.*)/, '\1-\2-\3-\4' ) 是什么意思？
我在 ruby 代码上偶然发现了这个。我知道\d{4})\/(\d\d)\/(\d\d)\/(.*)/是什么意思，但是\1-\2-\3-\4 是什么意思？最佳答案 \1-\2-\3-\4 是 b
d - 如何在没有 D 运行时编译 D 应用程序？
我一直在努力解决这个问题，这让我很恼火。我了解 D 运行时库。它是什么，它做什么。我也明白你可以在没有它的情况下编译 D 应用程序。就像 XoMB 所做的那样。好吧，XoMB 定义了自己的运行时，但是
Java算法到 "multiply"两个列表列表((A),(B))*((C,C),(D,D))==((A,C,C),(A,D,D), (B,C,C),(B,D,D))
我有两个列表列表，子列表代表路径。我想找到所有路径。 List> pathList1 List> pathList2 当然是天真的解决方案: List> result = new ArrayList>
java - 如何清理和打印\d{3}\d{3}\d{2}\d{2}格式的数字
我需要使用 Regex 格式化一个字符串，该字符串包含数字、字母 a-z 和 A-Z，同时还包含破折号和空格。从用户输入我有02-219 8 53 24 输出应该是022 198 53 24 我正在
d - D 中的表达式模板
目标是达到与this C++ example相同的效果: 避免创建临时文件。我曾尝试将 C++ 示例翻译为 D，但没有成功。我也尝试过不同的方法。 import std.datetime : benc
d - D 中的完美转发？
tl;dr:你好吗perfect forwarding在 D？该链接有一个很好的解释，但例如，假设我有这个方法: void foo(T)(in int a, out int b, ref int c
d - D 中的抽象自动函数
有什么方法可以在 D 中使用abstract auto 函数吗？如果我声明一个类如下: class MyClass { abstract auto foo(); } 我收到以下错误: mai
d - D 中的切片交集
有没有人为内存中重叠的数组切片实现交集？算法在没有重叠时返回 []。当 pretty-print (使用重叠缩进)内存中重叠的数组切片时，我想要这个。最佳答案如果您确定它们是数组，那么只需取 p
d - D 中循环索引变量的默认类型是什么？
我已经开始学习 D，但我在使用 Andrei Alexandrescu 所著的 The D Programming Language 一书中提供的示例时遇到了一些麻烦。由于 int 和 ulong 类
d - D 中唯一的不可变类
如何创建一个不可变的类？我的目标是创建一个实例始终不可变的类。现在我只是用不可变的方法和构造函数创建了一个“可变”类。我将其称为 mData，m 表示可变。然后我创建一个别名 alias immut
d - D 中的扩展函数
不久前我买了《The D Programming Language》。好书，很有教育意义。但是，我在尝试编译书中列出的语言功能时遇到了麻烦:扩展函数。在这本书中，Andrei 写了任何可以像这样调用
d - D 中的无限数据结构
我在 D http://www.digitalmars.com/d/2.0/lazy-evaluation.html 中找到了函数参数的惰性求值示例我想知道如何在 D 中实现可能的无限数据结构，就像
c - printf ("%d %d %d\n",++a, a++,a) 输出
这个问题在这里已经有了答案: 12 年前关闭。 Possible Duplicate: Could anyone explain these undefined behaviors (i = i++
d - D:查找具有特定属性的所有功能
当前是否可以跨模块扫描/查询/迭代具有某些属性的所有函数（或类）？例如： source/packageA/something.d: @sillyWalk(10) void doSomething()

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - D3js v4 画笔、缩放和点击时居中画笔