草庐IT

javascript - D3 Sankey 图中链接的梯度

coder 2024-05-08 原文

Here是 Sankey 图的jsfiddle:

我正在尝试修改链接的颜色，以便每个链接的颜色实际上是从其源节点颜色到其目标节点颜色的渐变。 (假设不透明度将保持 0.2 或 0.5，具体取决于鼠标是否悬停在链接上；因此链接将保持比节点“浅”一点)

我看了这个不错的，很有启发性的example ，它绘制了这个渐变填充循环:

但是，我根本无法将该解决方案集成到我的解决方案中，它对于给定的任务来说看起来太复杂了。

另请注意，原始 Sankey 图中的链接会在节点被拖动时移动，并且即使在这些过渡状态下也必须显示渐变。一个小问题是链接和节点的透明度以及绘制顺序。我将不胜感激想法和提示。

最佳答案

@VividD:刚看到你的评论，但我已经快完成了。在您自己弄清楚之前，请随意忽略它，但我想确保我也知道如何去做。另外，这是一个非常常见的问题，非常适合作为引用。

如何获得沿直线定位的渐变

With the caveat for anyone reading this later, that it will only work because the paths are almost straight lines, so a linear gradient will look half-decent -- setting a path stroke to a gradient does not make the gradient curve with the path!

  1. 在初始化中，创建一个 <defs> SVG 中的(定义)元素并将选择保存到变量:

    var defs = svg.append("defs");

  2. 定义一个函数，该函数将从链接数据对象中为您的渐变创建一个唯一 id。为确定节点颜色的函数命名也是一个好主意:

    function getGradID(d){return "linkGrad-" + d.source.name + d.target.name;}
function nodeColor(d) { return d.color = color(d.name.replace(/ .*/, ""));}

  3. 创建 <linearGradient> 的选择<defs> 中的对象并将其加入您的链接数据，然后根据源和目标数据对象设置停止偏移和线坐标。

    对于您的示例，如果您只是将所有渐变水平化，它可能看起来不错。由于这是方便的默认值，我认为我们所要做的就是告诉渐变适合它正在绘制的路径的大小:

    var grads = defs.selectAll("linearGradient")
                 .data(graph.links, getLinkID);

grads.enter().append("linearGradient")
             .attr("id", getGradID)
             .attr("gradientUnits", "objectBoundingBox"); //stretch to fit

grads.html("") //erase any existing <stop> elements on update
     .append("stop")
     .attr("offset", "0%")
     .attr("stop-color", function(d){
           return nodeColor( (d.source.x <= d.target.x)? d.source: d.target) 
          });

grads.append("stop")
     .attr("offset", "100%")
     .attr("stop-color", function(d){
           return nodeColor( (d.source.x > d.target.x)? d.source: d.target) 
          });

    不幸的是，当路径是完全直线时，它的边界框不存在(无论笔画宽度有多宽)，并且net result is the gradient doesn't get painted .

    所以我不得不切换到更通用的模式，其中渐变沿着源和目标之间的线定位和倾斜:

    grads.enter().append("linearGradient")
    .attr("id", getGradID)
    .attr("gradientUnits", "userSpaceOnUse");

grads.attr("x1", function(d){return d.source.x;})
    .attr("y1", function(d){return d.source.y;})
    .attr("x2", function(d){return d.target.x;})
    .attr("y2", function(d){return d.target.y;});

/* and the stops set as before */

  4. 当然，既然梯度是基于坐标系而不是基于路径的长度定义的，那么只要节点移动就必须更新这些坐标，所以我不得不将这些定位语句包装在我可以在 dragmove() 中调用的函数功能。

  5. 最后，在创建链接路径时，将其填充设置为 CSS url()引用从数据中导出的相应唯一梯度 ID 的函数(使用预定义的效用函数):

    link.style("stroke", function(d){
    return "url(#" + getGradID(d) + ")";
})

和Voila!

关于javascript - D3 Sankey 图中链接的梯度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21206081/

图中javascript34codefunctiond3.jsgradientsankey-diagram

有关javascript - D3 Sankey 图中链接的梯度的更多相关文章

  1. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  2. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

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

  4. ruby - 使用 Watir 检查错误链接 - 2

    我有一个未排序的链接列表，我将其保存在旁边，我想单击每个链接并确保它转到真实页面而不是404、500等。问题是我不知道该怎么做。是否有一些我可以检查的对象会给我http状态代码或任何东西？mylinks=Browser.ul(:id,'my_ul_id').linksmylinks.eachdo|link|link.click#needtocheckfora200statusorsomethinghere!how?Browser.backend 最佳答案 我的回答与铁皮人的想法类似。require'net/http'require'

  5. ruby - 如何为 pbcopy 生成富文本链接 - 2

    我一直在玩一个脚本，它在Chrome中获取选定的文本并在Google中查找它，提供四个最佳选择，然后粘贴相关链接。它以不同的格式粘贴，具体取决于当前在Chrome中打开的页面-DokuWiki打开的DokuWiki格式，普通网站的HTML，我想要我的WordPress所见即所得编辑器的富文本。我尝试使用pbpaste-Preferrtf来查看没有其他样式的富文本链接在粘贴板上的样子，但它仍然输出纯文本。在文本编辑中保存文件并进行试验后，我想出了以下内容text=%q|{\rtf1{\field{\*\fldinst{HYPERLINK"URL"}}{\fldrsltTEXT}}}|te

  6. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub

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

  8. ruby - 使用指向 ruby​​ 可执行文件的符号链接(symbolic link)时查找相关库 - 2

    假设您有一个可执行文件foo.rb，其库bar.rb的布局如下:/bin/foo.rb/lib/bar.rb在foo.rb的header中放置以下要求以在bar.rb中引入功能:requireFile.dirname(__FILE__)+"../lib/bar.rb"只要对foo.rb的所有调用都是直接的，这就可以正常工作。如果你把$HOME/project和符号链接(symboliclink)foo.rb放入$HOME/usr/bin,然后__FILE__解析为$HOME/usr/bin/foo.rb,因此无法找到bar.rb关于foo.rb的目录名.我意识到像ruby​​gems这

  9. ruby-on-rails -/usr/local/lib/libz.1.dylib，文件是为 i386 构建的，它不是被链接的体系结构 (x86_64) - 2

    在我的mac上安装几个东西时遇到这个问题，我认为这个问题来自将我的豹子升级到雪豹。我认为这个问题也与macports有关。/usr/local/lib/libz.1.dylib,filewasbuiltfori386whichisnotthearchitecturebeinglinked(x86_64)有什么想法吗？更新更具体地说，这发生在安装nokogirigem时日志看起来像:xslt_stylesheet.c:127:warning:passingargument1of‘Nokogiri_wrap_xml_document’withdifferentwidthduetoproto

  10. ruby - 使用 Nokogiri 和 Ruby 从 html 文档获取链接和 href 文本？ - 2

    我正在尝试使用nokogirigem提取页面上的所有url及其链接文本，并将链接文本和url存储在散列中。FooBar我想回去{"Foo"=>"#foo","Bar"=>"#bar"} 最佳答案 这是一个单行:Hash[doc.xpath('//a[@href]').map{|link|[link.text.strip,link["href"]]}]#=>{"Foo"=>"#foo","Bar"=>"#bar"}拆分一点可以说更具可读性:h={}doc.xpath('//a[@href]').eachdo|link|h[link.t

随机推荐