在学习这两种框架的背景下,我正在尝试不同的方式来集成 D3 和 Angular,并希望得到一些意见:
我的客户端应用程序从我的服务器接收一个 JSON 节点数组和一个边数组。 客户端的核心组件是作为 D3 力导向布局实现的图形可视化:对于节点数组中的每个节点,将一个 (SVG) 圆元素添加到此可视化中,并为这些圆之间的每条边添加线边缘数组。
当然,D3 的 selection.data( ) 使得添加这些元素并将每个元素绑定(bind)到它所代表的数据变得微不足道,但是图形可视化只是更大应用程序的一部分:我需要在应用程序的不同部分(与 D3 无关)创建代表这些相同节点和边缘的不同类型的元素,我希望将所有这些元素绑定(bind)到单个数据集。
我的主要目标是最大限度地降低代码复杂性,并且 - 尽管我已经爱上了 D3 数据绑定(bind)功能的简单和优雅 - 我得出了一个初步的结论,即在应用程序的一部分中同时使用它使用 Angular 在其他部分做同样的事情会产生不必要的复杂性,最简单的方法是使用 Angular 来处理数据绑定(bind)/元素创建
换句话说,我认为我应该使用 ng- 而不是使用 ,也许将每个创建为自定义指令以允许自定义功能。这样做之后,我需要将这些元素“放入”D3,即由其力导向布局进行管理。selection.data( ).enter( ).append( ) 来创建 SVG 元素repeat="node in nodes"
我的推理合理吗?特别是,我担心我忽略了这将在对象恒常性方面产生的复杂性,这是节点进入、退出时的重要要求不断地在屏幕上移动,我需要这些过渡是平滑的。你会如何建议我将我的 Angular 创建的元素集成到 D3 中(更准确地说,将它们放入我的 force.nodes{ } 和 force.links( ) 数组中)避免任何此类并发症?
最后,我也在考虑一个策略,我希望它可以让我两全其美:我可以使用 D3 来创建我的 SVG 元素并将它们绑定(bind)到它们各自的数据,而不是在可视化指令的 link 函数(正如我一直在做的,以及我发现的所有 Angular/D3 教程),我可以在 compile 中运行它功能,并做这样的事情:
d3.select('SVG')
.selectAll('.node')
.data('nodeDataArray')
.enter( )
.append('circle')
.attr("class", "node-icon"); //...other attributes/styles etc
其中,node-icon 是具有包含 C 的 restrict 属性的指令的规范化名称。如果它在编译方法中运行,那么 Angular 应该正常编译所有这些指令,添加任何额外的功能/与其他指令(等)的接口(interface),就像它对任何其他类型的元素所做的一样。 对吧?
这是直觉上最吸引我的选项 - 是否有任何我可能忽略的陷阱,这可能使前一种策略更可取?
最佳答案
一段时间以来,我一直在思考几乎相同的问题,并得出以下结论。
将 Angular 创建的元素与 d3 集成的最简单方法是使用 .attr 添加指令,然后在 d3 生成的元素上 .call 编译服务。像这样:
mySvg.selectAll("circle")
.data(scope.nodes)
.enter()
.append("circle")
.attr("tooltip-append-to-body", true)
.attr("tooltip", function(d){
return d.name;
})
.call(function(){
$compile(this[0].parentNode)(scope);
});
我认为使用 Angular ngRepeat 而不是 d3 生成元素的想法不利于框架。 D3 不希望收到一堆元素。它想要传递数据——几乎总是一个数组。然后它有一堆优秀的函数来将数据转换成各种 SVG 或 HTML 元素。让它那样做。
从这句话看来……
D3 makes it trivial to add elements and bind each to the data it represents, but the graph visualization is only part of a much larger application: I need to create different types of elements representing these same nodes and edges in different parts of the application (which D3 has nothing to do with), and I'd like to keep all of these elements bound to a single dataset.
...您暗示使用 d3 生成元素会以某种方式阻止您将相同的数据绑定(bind)到应用程序的不同部分。我不明白为什么。只需让 d3 从范围数组生成元素(就像在链接的 Plunker 中所做的那样)。然后以通常的 Angular 方式在任何地方使用相同的数据集。应用程序的其他部分可以更新数据集,并且 $watch 回调可以重新呈现 d3 图形。
关于javascript - 将 Angular 创建的元素与 D3 集成的最简单方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23231587/
我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
总的来说,我对ruby还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
出于纯粹的兴趣,我很好奇如何按顺序创建PI,而不是在过程结果之后生成数字,而是让数字在过程本身生成时显示。如果是这种情况,那么数字可以自行产生,我可以对以前看到的数字实现垃圾收集,从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法,类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
我正在尝试设置一个puppet节点,但rubygems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter,它工作正常,但如果我通过由rubygems(/usr/bin/facter)安装的二进制文件,它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。
我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索,但这不是我需要的。我也看过ruby-doc.org,但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗?更新我用methods()方法做了实验,得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco
使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta
我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject),但我没有脚本/生成,只有脚本/rails,当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗?没有这个命令可以创建插件吗?PS:我正在使用Rails3.2.1和ruby1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布,插件生成器已经被移除。查看变更日志here.现在
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer