草庐IT

javascript - d3.js:将数据从父节点传递到子节点

coder 2025-02-18 原文

我正在使用 d3 制作堆积条形图。

数据是一个数组，每个条都有一个对象(例如“喜欢”)。然后每个对象都包含一个值数组，这些值驱动每个条形图的各个矩形:

data =  [{
          key = 'likes', values = [
            {key = 'blue-frog', value = 1}, 
            {key = 'goodbye', value = 2}
          ]
        }, {
          key = 'dislikes, values = [
            {key = 'blue-frog', value = 3},
            {key = 'goodbye', value = 4}
          ]
        }]

图表工作正常，如下所示:

// Create canvas
bars = svg.append("g");

// Create individual bars, and append data
// 'likes' are bound to first bar, 'dislikes' to second
bar = bars.selectAll(".bar")
        .data(data)        
        .enter()
        .append("g");

// Create rectangles per bar, and append data
// 'blue-frog' is bound to first rectangle, etc.
rect = bar.selectAll("rect")
        .data(function(d) { return d.values;})
        .enter()
        .append("rect");

我想为每个矩形创建工具提示，上面写着“喜欢:2”之类的内容，这涉及将有关条形键的信息绑定(bind)到矩形。我还没有找到执行此操作的方法(除了更改数据)。你能找到一个优雅的解决方案吗？

另外，我不确定我是否以最好的方式描述了这个问题。如果您对更好的标题有任何建议，请告诉我。

最佳答案

不确定您是否认为这是一个优雅的解决方案，但它避免了更改您的数据。

它利用了一些关键的“特征”:

  • 您可以自由获取对选择数组的引用，然后使用选择数组(但要使用此数组，您需要知道当前的选择组 - 请参阅最后一点)
  • 通过.parentNode属性，可以获取父节点的DOM元素
  • 通过__data__属性，可以获取到父节点的关联数据
  • 数据访问函数 function(d,i){....} 可以以 3 参数形式提供:function(d,i,j){.. .. 其中 j 是当前选择组。

因此，在您的示例中，您可以获得选择数组:

var selection = bar.selectAll("rect")
  .data(function(d) { return d.values;})
  .enter();

从选择数组中，您可以获得有问题的数据:

selection
  .append("li")
  .text(function(d,i,j) {
    return selection[j].parentNode.__data__.key; 
  }

在这种情况下更容易看到完整的示例，而不是代码片段:

http://bl.ocks.org/4199266

正如我在要点上提到的那样——我记得读过有关数据访问器函数的这种三参数形式的文章，但我记不住在哪里——我希望有人指出记录这个“特性”的源 Material '.

关于javascript - d3.js:将数据从父节点传递到子节点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13662756/

javascript传递sectiondata39d3.js

有关javascript - d3.js:将数据从父节点传递到子节点的更多相关文章

  1. ruby - rails 3 redirect_to 将参数传递给命名路由 - 2

    我没有找到太多关于如何执行此操作的信息，尽管有很多关于如何使用像这样的redirect_to将参数传递给重定向的建议:action=>'something',:controller=>'something'在我的应用程序中，我在路由文件中有以下内容match'profile'=>'User#show'我的表演Action是这样的defshow@user=User.find(params[:user])@title=@user.first_nameend重定向发生在同一个用户Controller中，就像这样defregister@title="Registration"@user=Use

  2. ruby-on-rails - 如何生成传递一些自定义参数的 `link_to` URL？ - 2

    我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些

  3. ruby - 在 Ruby 中按名称传递函数 - 2

    如何在Ruby中按名称传递函数？(我使用Ruby才几个小时，所以我还在想办法。)nums=[1,2,3,4]#Thisworks,butismoreverbosethanI'dlikenums.eachdo|i|putsiend#InJS,Icouldjustdosomethinglike:#nums.forEach(console.log)#InF#,itwouldbesomethinglike:#List.iternums(printf"%A")#InRuby,IwishIcoulddosomethinglike:nums.eachputs在Ruby中能不能做到类似的简洁？我可以只

  4. ruby - 如何将 Puma::Configuration 传递给 Sinatra？ - 2

    这是我的网络应用:classFront我是这样开始的(请不要建议使用Rack):Front.start!这是我的Puma配置对象，我不知道如何传递给它:require'puma/configuration'Puma::Configuration.new({log_requests:true,debug:true})说真的，怎么样？ 最佳答案 配置与您运行的方式紧密相关puma服务器。运行的标准方式puma-pumaCLI命令。为了配置puma配置文件config/puma.rb或config/puma/.rb应该提供(参见examp

  5. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

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

  7. ruby - 如何将 lambda 传递给 Hash.each？ - 2

    如何将lambda传递给hash.each，以便我可以重复使用一些代码？>h={a:'b'}>h.eachdo|key,value|end=>{:a=>"b"}>test=lambdado|key,value|puts"#{key}=#{value}"end>test.call('a','b')a=b>h.each&testArgumentError:wrongnumberofarguments(1for2)from(irb):1:in`blockinirb_binding'from(irb):5:in`each'from(irb):5from/Users/jstillwell/.rv

  8. ruby - 将命令行上的变量传递给 Cucumber 测试 - 2

    我正在尝试将cucumber项目的用户名和密码置于版本控制之外。有没有办法在命令行上手动将用户名和密码等变量传递给Cucumber脚本？我的备份计划是将它们放在一个YML文件中，然后将该文件添加到gitignore，这样它们就不会被置于版本控制中。 最佳答案 所以，我看到了您对铁皮人的评论，答案是肯定的。cucumberPASSWORD=my_passwordPASSWORD被设置为环境变量，您可以通过将其引用为ENV['PASSWORD']来使用它的值。例如，browser.text_field(:id=>'pwd').setEN

  9. Ruby HERE-DOC方法参数传递 - 2

    我正在尝试将自定义方法与here-doc一起使用，并希望传递参数(没有业务案例，我只是想学习ruby​​)。在这种情况下有没有办法传递参数？这是我目前所拥有的。方法简单，效果很好。defmeth1self.upcaseendstr1=现在，我想让我们放弃一些参数并尝试不同的变体，irb给了我一个茫然的眼神。#variation1defmeth2( 最佳答案 我猜这就是您要尝试做的:defmeth2(str1,str2)str1.upcase+"..."+str2.downcaseendstr2=meth2("SOMESTRING\n

  10. ruby - 将运算符传递给函数？ - 2

    也许这听起来很荒谬，但我想知道这对Ruby是否可行？基本上我有一个功能...defadda,bc=a+breturncend我希望能够将“+”或其他运算符(例如“-”)传递给函数，这样它就类似于...defsuma,b,operatorc=aoperatorbreturncend这可能吗？ 最佳答案 两种可能性:以方法/算子名作为符号:defsuma,b,operatora.send(operator,b)endsum42,23,:+或者更通用的解决方案:采取一个block:defsuma,byielda,bendsum42,23,

随机推荐