javascript - d3v4 - 缩放(相当于 d3.zoom.x)

coder 2024-07-20 原文

我正在将我的 d3 代码从 v3 迁移到 v4，但在寻找 d3.zoom.x、d3.zoom.y 属性的等效项时遇到问题。

这是代码的一小部分，包括最重要的元素:

            this.init = function(obj, def) {

            /* X-axis */
            x = d3.scaleTime()
                .range([0, width]);


            xAxis = d3.axisBottom(x)
                .ticks(ticks);

            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")");

            /* Y-axis */
            for (var i = 0; i < 1; i++) {
                // Returns the y and yAxis as arrays
                createYAxis(i);
            }

            initZoom();

        };
            // Zoom trigger
            var drawUpdXY = function(){
                setPause(true);
                drawUpd();
                zoomY.y(y[0]);
                zoomX.x(x);


            zoom = d3.zoom()
                .on("zoom", drawUpdXY);

            zoomX = d3.zoom()
                .on("zoom", drawUpdX);

            zoomY = d3.zoom()
                .on("zoom", drawUpdY);
            };

我试过用它来代替“zoom.x(x); zoom.y(y[0])”

      xAxis.scale(d3.event.transform.rescaleX(x));
      yAxis[0].scale(d3.event.transform.rescaleY(y[0]));

但是，这些只会重新缩放轴，而不会缩放数据。

最佳答案

我无法说明 d3 v3 如何处理缩放，因为我最近才开始使用 D3，但下面的代码应该能为您指明正确的方向。我会尽力描述发生了什么。我邀请更正、改进和更好的解释。

首先，一个 MCVE

<html>

<head>
  <meta charset="UTF-8">
  <title>Energy Visualizer</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-color.v1.min.js"></script>
  <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body {
      background-color: #4e5965;
    }
  </style>
  </svg>
</head>

<body>
  <div class="chart" />
  <script>
    var svg = d3.select(".chart").append("svg")
      .attr("width", 200)
      .attr("height", 200);

    var data = [{
      "x": 2,
      "y": 8,
      "color": "green"
    }, {
      "x": 4,
      "y": 6,
      "color": "red"
    }];

    var width = svg.attr("width");
    var height = svg.attr("height");

    x_scale = d3.scaleLinear().domain([0, 10]).range([0, width]);
    y_scale = d3.scaleLinear().domain([0, 10]).range([0, height]);

    var circles = svg.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return x_scale(d.x);
      })
      .attr("cy", function(d) {
        return y_scale(d.y);
      })
      .attr("r", 5)
      .attr("fill", function(d) {
        return d.color
      });

    var xAxis = d3.axisBottom(x_scale);
    var yAxis = d3.axisRight(y_scale);

    var x_axis = svg.append("g").call(xAxis);
    var y_axis = svg.append("g").call(yAxis);
  </script>
</body>

</html>

这只是一个带有红色和绿色圆圈的简单散点图。您可以看到我是如何分解 x 轴和 y 轴的组件的。这与 d3.zoom() 一起发挥作用。

接下来，让我们添加一个缩放组件。

<html>

<head>
  <meta charset="UTF-8">
  <title>Energy Visualizer</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-color.v1.min.js"></script>
  <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body {
      background-color: #4e5965;
    }
  </style>
  </svg>
</head>

<body>
  <div class="chart" />
  <script>
    var svg = d3.select(".chart").append("svg")
      .attr("width", 200)
      .attr("height", 200);

    var zoom = d3.zoom()
      .on("zoom", zoomed);

    svg.call(zoom);

    var data = [{
      "x": 2,
      "y": 8,
      "color": "green"
    }, {
      "x": 4,
      "y": 6,
      "color": "red"
    }];

    var width = svg.attr("width");
    var height = svg.attr("height");

    x_scale = d3.scaleLinear().domain([0, 10]).range([0, width]);
    y_scale = d3.scaleLinear().domain([0, 10]).range([0, height]);

    var circles = svg.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return x_scale(d.x);
      })
      .attr("cy", function(d) {
        return y_scale(d.y);
      })
      .attr("r", 5)
      .attr("fill", function(d) {
        return d.color
      });

    var xAxis = d3.axisBottom(x_scale);
    var yAxis = d3.axisRight(y_scale);

    var x_axis = svg.append("g").call(xAxis);
    var y_axis = svg.append("g").call(yAxis);


    function zoomed() {
      var new_x_scale = d3.event.transform.rescaleX(x_scale);
      var new_y_scale = d3.event.transform.rescaleY(y_scale);

      x_axis.transition()
        .duration(0)
        .call(xAxis.scale(new_x_scale));

      y_axis.transition()
        .duration(0)
        .call(yAxis.scale(new_y_scale));

      circles
        .attr("cx", function(d) {
          return new_x_scale(d.x)
        })
        .attr("cy", function(d) {
          return new_y_scale(d.y)
        });

    }
  </script>
</body>

</html>

在这里，您可以看到图表允许放大、缩小和在两个轴上拖动。我相信您只需要单轴缩放，因此在这种情况下，只需重新缩放 x 轴和每个圆圈位置的 x 分量。

最后一个片段做我认为你想要的。

<html>

<head>
  <meta charset="UTF-8">
  <title>Energy Visualizer</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-color.v1.min.js"></script>
  <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body {
      background-color: #4e5965;
    }
  </style>
  </svg>
</head>

<body>
  <div class="chart" />
  <script>
    var svg = d3.select(".chart").append("svg")
      .attr("width", 200)
      .attr("height", 200);

    var zoom = d3.zoom()
      .on("zoom", zoomed);

    svg.call(zoom);

    var data = [{
      "x": 2,
      "y": 8,
      "color": "green"
    }, {
      "x": 4,
      "y": 6,
      "color": "red"
    }];

    var width = svg.attr("width");
    var height = svg.attr("height");

    x_scale = d3.scaleLinear().domain([0, 10]).range([0, width]);
    y_scale = d3.scaleLinear().domain([0, 10]).range([0, height]);

    var circles = svg.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return x_scale(d.x);
      })
      .attr("cy", function(d) {
        return y_scale(d.y);
      })
      .attr("r", 5)
      .attr("fill", function(d) {
        return d.color
      });

    var xAxis = d3.axisBottom(x_scale);
    var yAxis = d3.axisRight(y_scale);

    var x_axis = svg.append("g").call(xAxis);
    var y_axis = svg.append("g").call(yAxis);


    function zoomed() {
      var new_x_scale = d3.event.transform.rescaleX(x_scale);

      x_axis.transition()
        .duration(0)
        .call(xAxis.scale(new_x_scale));

      circles
        .attr("cx", function(d) {
          return new_x_scale(d.x)
        });

    }
  </script>
</body>

</html>

关于javascript - d3v4 - 缩放(相当于 d3.zoom.x)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39387727/

javascript 相当 34 scale script zooming d3.js

有关javascript - d3v4 - 缩放(相当于 d3.zoom.x)的更多相关文章

Python 相当于 Perl/Ruby ||= - 2
这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Pythonconditionalassignmentoperator对于这样一个简单的问题表示歉意，但是谷歌搜索||=并不是很有帮助；)Python中是否有与Ruby和Perl中的||=语句等效的语句？例如:foo="hey"foo||="what"#assignfooifit'sundefined#fooisstill"hey"bar||="yeah"#baris"yeah"另外，类似这样的东西的通用术语是什么？条件分配是我的第一个猜测，但Wikipediapage跟我想的不太一样。
java - 什么相当于 ruby 的 rack 或 python 的 Java wsgi？ - 2
什么是ruby的rack或python的Java的wsgi？还有一个路由库。最佳答案来自Python标准PEP333:Bycontrast,althoughJavahasjustasmanywebapplicationframeworksavailable,Java's"servlet"APImakesitpossibleforapplicationswrittenwithanyJavawebapplicationframeworktoruninanywebserverthatsupportstheservletAPI.ht
java - Ruby 相当于 Java 的 Collections.unmodifiableList 和 Collections.unmodifiableMap - 2
Java的Collections.unmodifiableList和Collections.unmodifiableMap在Ruby标准API中是否有等价物？最佳答案使用freeze应用程序接口(interface):Preventsfurthermodificationstoobj.ARuntimeErrorwillberaisedifmodificationisattempted.Thereisnowaytounfreezeafrozenobject.SeealsoObject#frozen?.Thismethodretur
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
python - Ruby 相当于 Python str[3 :] - 2
是否有Ruby等效于Python的方法来获取在字符串末尾结束的子字符串，如str[3:]？必须输入字符串的长度并不方便。最佳答案传递最后一个元素=-1的范围str[3..-1] 关于python-Ruby相当于Pythonstr[3:]，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/12978768/
ruby - Java 8 相当于 ruby each_with_index - 2
我想知道，是否有一些流操作可以像ruby中的each_with_index那样做。其中each_with_index遍历值以及值的索引。最佳答案没有专门用于该目的的流操作。但您可以通过多种方式模仿该功能。索引变量:以下方法适用于顺序流。int[]index={0};stream.forEach(item->System.out.printf("%s%d\n",item,index[0]++));外部迭代:以下方法适用于并行流，只要原始集合支持随机访问。Listtokens=...;IntStream.range(0,toke
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
ruby - setInterval() 相当于 ruby - 2
在JavaScript中你可以这样做:setInterval(func,delay);我似乎无法在谷歌上找到任何我真正要找的东西。是否有ruby等价物？提前致谢。最佳答案你可以做类似的事情:Thread.newdoloopdosleepdelay#yourcodehereendend或者你可以定义一个函数:#@return[Thread]returnloopthreadreferencedefset_interval(delay)Thread.newdoloopdosleepdelayyield#callpassedblocke
ruby-on-rails - Textmate 'Go to symbol' 相当于 Vim - 2
在Railcasts上，我注意到一个非常有趣的功能“转到符号”窗口。它像Command-T一样工作，但显示当前文件中可用的类和方法。如何在vim中获取它？最佳答案尝试:helptags有各种程序和脚本可以生成标记文件。此外，标记文件格式非常简单，因此很容易将sed(1)或类似的脚本组合在一起，无论您使用何种语言，它们都可以生成标记文件。轻松获取标记文件(除了下载生成器之外)的关键在于格式化样式而不是实际解析语法。关于ruby-on-rails-Textmate'Gotosymbol
ruby-on-rails - Ruby 中的类方法(相当于 JAVA 中的静态方法) - 2
伙计们，我正在学习ruby，最近从JAVA转行。在JAVA中，我可以将类的成员变量设为静态，并且该成员变量在类的实例中保持不变。我如何在ruby中实现相同的目标。我在我的ruby课上做了这样的事情:classBaseclass@@wordshashend到目前为止，这似乎在我测试时达到了目的，即@@wordhash在Baseclass的实例中保持不变。我的理解对吗？另外，我想在类中有一个成员方法，相当于JAVA中的静态方法(我不需要类的实例来访问它)。我怎样才能做到这一点？例如，我想在Baseclass中有一个像getwordshash()这样的方法，它返回@@wordshas

javascript - d3v4 - 缩放(相当于 d3.zoom.x)

有关javascript - d3v4 - 缩放(相当于 d3.zoom.x)的更多相关文章

随机推荐