草庐IT

javascript - d3 - 数据更新时更改文本标签

coder 2024-07-23 原文

我使用 d3 创建了一个条形图,显示其上每个条形的文本值。我通过按钮上的单击事件在两个不同的数据集之间切换。数据集在 mousedown 上成功更改,即条形图按应有的大小改变,但我无法更改条形上的文本标签。我的 redrawText 函数没有做任何事情,再次调用我的 drawText 函数只是在前一个标签的顶部重绘数据(正如人们所期望的那样)。我正在寻找一种方法来删除旧标签并重新绘制反射(reflect)我的 removeText 函数中的新数据的标签。

这是我的 drawText 函数,最初调用它是为了创建标签。 'datachoose' 是选择用于绘制正确数据集的变量的名称。

function drawText(dataChoose) {
     new_svg.selectAll("text.dataChoose")
        .data(dataChoose)
        .enter().append("text")
        .text(function(d) {
                return d;
                })
    /* removed some transform code */
     .attr("fill", "white")
     .attr("style", "font-size: 12; font-family: Garamond, sans-serif");
}

这是我的 mousedown 事件处理程序的相关部分,用于更新数据集和重绘图形:

.on("mousedown", function() {

        if (dataChoose == data) {
            dataChoose = data2;
        }

        else {
        dataChoose = data;
        }

        redraw(dataChoose);
        redrawText(dataChoose);
    });

这是我的 redrawText() 函数

function redrawText(dataChoose) {

    var new_text = new_svg.selectAll("text.dataChoose")
        .data(dataChoose);

    new_text.transition()
     .duration(1000)
     .text(function(d) {
        return d;
        })

/* removed transform code */

    .attr("fill", "white")
    .attr("style", "font-size: 16; font-family: Garamond, sans-serif");
}

最佳答案

如果没有完整示例,很难准确了解您在做什么,但看起来如果文本标签是数据的属性,您可能无法正确获取标签字段。

这是我认为您所描述的期望行为的一个简单示例:(LINK):http://tributary.io/inlet/9064381

var svg = d3.select('svg');

var data = [{"tag":"abc","val":123}]
    data2 = [{"tag":"ijk","val":321}]

var dataChoose = data;

var myBarGraph = svg.selectAll('rect')
    .data(dataChoose)
    .enter()
    .append('rect')
    .attr({
      x: 160,
      y: 135,
      height: 20,
      width: function(d) { return d.val; },
      fill: 'black'
    });

var updateBarGraph = function() {
    myBarGraph
    .data(dataChoose)
    .transition()
    .duration(1000)
    .attr('width', function(d) { return d.val; })
}

var myText = svg.append('text')
    .data(dataChoose)
    .attr('x', 129)
    .attr('y', 150)
    .attr('fill', '#000')
    .classed('dataChoose', true)
    .text(function(d) { return d.tag })

svg.on("click", function() {
        if (dataChoose == data) {
            dataChoose = data2;
        } else {
        dataChoose = data;
        }
        redrawText();
        updateBarGraph();
    });

function redrawText() {
    myText
    .data(dataChoose)
    .transition()
    .duration(1000)
    .style("opacity", 0)
    .transition().duration(500)
    .style("opacity", 1)
    .text(function(d) { return d.tag })
}

编辑:另一种可能性是您的标签转换不起作用,因为您需要告诉 d3 如何进行文本转换(请参阅更新的 redrawText)。

关于javascript - d3 - 数据更新时更改文本标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21843667/

有关javascript - d3 - 数据更新时更改文本标签的更多相关文章

  1. ruby-on-rails - Ruby on Rails 迁移,将表更改为 MyISAM - 2

    如何正确创建Rails迁移,以便将表更改为MySQL中的MyISAM?目前是InnoDB。运行原始执行语句会更改表,但它不会更新db/schema.rb,因此当在测试环境中重新创建表时,它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移,以便将现有表修改为MyISAM并更新schema.rb,以便我的数据库和相应的测试数据库得到相应更新? 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb,然后运行:rakedb:schema:load,但是,这将覆盖您的数据。我的做法是(假设

  2. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息? 最佳答案 在Rails3中,update_all不返回任何有意义的信息,除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码,尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么?

  6. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  7. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4,一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时,用户会更新。但是当我添加例如字段:name时,它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗?我也搜索过这个地方,找到了许多不同的解决方案,但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数,您可以在ApplicationController中使用beforefilter,因为Rails4将参数

  8. ruby - Capistrano 3 在任务中更改 ssh_options - 2

    我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置,capistrano与用户deploy连接,这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe

  9. ruby - Ruby 有 `Pair` 数据类型吗? - 2

    有时我需要处理键/值数据。我不喜欢使用数组,因为它们在大小上没有限制(很容易不小心添加超过2个项目,而且您最终需要稍后验证大小)。此外,0和1的索引变成了魔数(MagicNumber),并且在传达含义方面做得很差(“当我说0时,我的意思是head...”)。散列也不合适,因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题,但我很想知道:Ruby标准库是否已经带有这样一个类? 最佳

  10. ruby - 更改 ActiveRecord 中对象的类 - 2

    假设我有一个FireNinja我的数据库中的对象,使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么?更好的是,我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中,保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象,我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行,还是通过对对象本身做一些疯狂的事情,或者甚至通过删除它并使用相同的ID重新插入来做到这一点,这是问题的一部分。

随机推荐