草庐IT

javascript - 高度过渡从上到下，而不是在 D3 中从下到上

coder 2024-07-22 原文

我正在使用以下代码制作条形图:

svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
        return x(d.value) - barWidth / 2;
    })
    .attr("width", barWidth)
    .attr("y", function(d) {
        return y(d.frequency);
    })
    //.attr("height", 0)
    //.transition()
    .attr("height", function(d) {
        return height - y(d.frequency);
    });

如果我添加注释掉的行，则条形图会从高度 0 过渡到其适当的高度；然而，出于某种原因，条形图不是从 x 轴向上“增长”，而是从其最高值开始，然后向 x 轴向下“增长”。为什么会这样？我该如何解决这个问题？

最佳答案

Why is this happening?

这种设置方式意味着您将 rect 的顶部设置为与 d.frequency 相关的任何 y 值，然后将底部定义为位于 x 轴本身(通过从最大高度中减去计算出的 y 值)。鉴于在过渡之前您有效地固定了 y 值，然后让高度过渡，您实际做的只是移动 rect 的底部，给出您描述的效果。

How can I fix this?

最简单的解决方法是同时转换 y 值和高度，以保持 rect 底部固定的方式。为此，在转换之前只需将 y 属性设置为 y(0)，然后在 之后 transition()，将 y 属性设置为计算版本，即 y(d.frequency)。像这样:

svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
        return x(d.value) - barWidth / 2;
    })
    .attr("width", barWidth)
    .attr("y", function(d) {
        return y(0);
    })
    .attr("height", 0)
    .transition()
    .attr("y", function(d) {
        return y(d.frequency);
    })
    .attr("height", function(d) {
        return height - y(d.frequency);
    });

关于javascript - 高度过渡从上到下，而不是在 D3 中从下到上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36126004/

过渡javascriptcode34attrd3.jssvg

有关javascript - 高度过渡从上到下，而不是在 D3 中从下到上的更多相关文章

  1. 【Java 面试合集】HashMap中为什么引入红黑树，而不是AVL树呢 - 2

    HashMap中为什么引入红黑树，而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道，在JDK1.8以及之前，针对HashMap有什么不同。JDK1.7的时候，HashMap的底层实现是数组+链表JDK1.8的时候，HashMap的底层实现是数组+链表+红黑树我们要思考一个问题，为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好？？？2.链表上述的截图其实就是链表的结构，我们来看下链表的增删改查的时间复杂度增：因为链表不是线性结构，所以每次添加的时候，只需要移动一个节点，所以可以理解为复杂度是N(1)删：算法时间复杂度跟增保持一致查：既然是非线性结构，所以查询某一个节点的时候

  2. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby-on-rails - 只有当不是 nil 时才执行映射？ - 2

    如果names为nil，则以下中断。我怎样才能让这个map只有在它不是nil时才执行？self.topics=names.split(",").mapdo|n|Topic.where(name:n.strip).first_or_create!end 最佳答案 其他几个选项:选项1(在其上执行map时检查split的结果):names_list=names.try(:split,",")self.topics=names_list.mapdo|n|Topic.where(name:n.strip).first_or_create!e

  4. ruby-on-rails - Rails 格式验证——字母数字，但不是纯数字 - 2

    什么是测试格式验证的最佳方法让我们说一个用户名，使用字母数字的正则表达式，但不是纯数字？我一直在我的模型中使用以下验证validates:username,:format=>{:with=>/^[a-z0-9]+[-a-z0-9]*[a-z0-9]+$/i}数字用户名(例如“342”)通过了验证，这是我不想要的。 最佳答案 您想“向前看”一封信:/\A(?=.*[a-z])[a-z\d]+\Z/i 关于ruby-on-rails-Rails格式验证——字母数字，但不是纯数字，我们在Sta

  5. ruby - 强制浏览器下载文件而不是打开文件 - 2

    我要下载http://foobar.com/song.mp3作为song.mp3，而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点？ 最佳答案 您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.

  6. ruby - 更改 $LOAD_PATH 时，为什么使用 unshift 而不是 push？ - 2

    我发现ruby加载路径是一个数组，很多项目都是这样使用的:$:.unshift(File.expand_path("../../lib",__FILE__))可以将本地文件添加到ruby路径数组的前面，方便我们require或者load。所以，我希望知道为什么我们不使用push将文件添加到数组的末尾？ 最佳答案 假设您有一个“date.rb”文件(为什么不呢)并且您想要加载这个文件，而不是标准库日期。如果您使用追加，当您调用require'date'时您的文件将永远不会被加载，因为它位于数组的末尾并且标准日期会在之前找到。因此，如果

  7. ruby - 如何排序不是简单的哈希(哈希的哈希) - 2

    我有一个这样的哈希{55=>{:value=>61,:rating=>-147},89=>{:value=>72,:rating=>-175},78=>{:value=>64,:rating=>-155},84=>{:value=>90,:rating=>-220},95=>{:value=>39,:rating=>-92},46=>{:value=>97,:rating=>-237},52=>{:value=>73,:rating=>-177},64=>{:value=>69,:rating=>-167},86=>{:value=>68,:rating=>-165},53=>{:va

  8. ruby - Unicorn 使用 `reload` 而不是 `restart`？ - 2

    我在这里对我的部署策略有点困惑，在什么情况下部署时我想向unicorn发送reload信号？例如在我的例子中它会是这样的:sudokill-sUSR2`cat/home/deploy/apps/my_app/current/tmp/pids/unicorn.pid`我一直在通过杀死那个pid来部署我的应用程序，然后通过类似的东西再次启动unicorn:bundleexecunicorn-cconfig/unicorn/production.rb-Eproduction-D我只是想知道为什么要使用重新加载？我可以通过这样做获得部署的任何性能吗？ 最佳答案

  9. 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

  10. ruby - 使用 Ruby FileUtils 而不是 Bash 命令的好处？ - 2

    使用FileUtils方法有什么好处http://ruby-doc.org/core/classes/FileUtils.html比等效的Bash命令？ 最佳答案 除此之外，您不必担心确保您的目标平台安装了您正在使用的特定工具这一事实，以及正确引用shell异常的问题(如果您的目标是特别有问题的)Windows和Unix-alikes——尽管有Cygwin、GNUWin32等)，如果你使用Ruby的FileUtils，你有一个Ruby函数调用的中等大小的开销，而如果你使用外部实用程序，你有相当大的开销来启动一个外部进程的每一次“调用

随机推荐