草庐IT

javascript - 改进 D3 序列旭日示例

coder 2024-07-29 原文

这个 D3 示例作为我的起点:

http://bl.ocks.org/kerryrodden/7090426

我想更改为图表提供数据的数据，并制作了以下新示例:

http://jsfiddle.net/ZGVK3/

至少可以注意到两个问题:

  1. 图例是错误的。这是因为它仍然包含来自原始示例的“硬编码”名称。
  2. 所有节点都是黑色的。这是因为配色方案也仅针对原始示例中的节点名称进行了“硬编码”。

如何改进原始示例(或我的 jsfiddle，没关系)，以便图例和颜色根据提供图表的数据进行 self 调整？

最佳答案

您可以使用序数比例将颜色映射到不同的节点名称。实现它只需要对现有代码进行一些小改动。

第 1 步。为颜色创建序数标度

不是让 colors 只是一个颜色名称列表，硬编码为特定名称，而是使用 d3.scale.ordinal() ，并将 .range() 设置为您要使用的颜色的数组。例如:

var colors = d3.scale.ordinal()
  .range(["#5687d1","#7b615c","#de783b","#6ab975","#a173d1","#bbbbbb"]);

这将创建一个使用与原始可视化相同颜色的序数标度。由于您的数据需要更多颜色，因此您需要在范围内添加更多颜色，否则颜色会重复。

作为快捷方式，您可以使用 d3.scale.category20()让 d3 为您选择 20 种分类颜色。

现在，当为您的 path 元素弧和面包屑设置填充颜色时，您只需使用 colors(d.name) 而不是 colors[ d.name].

第 2 步。使用您的数据构建量表的域

这个比例的 .domain() 将在我们拥有数据后设置，因为它将取决于数据中包含的唯一名称列表。为此，我们可以遍历数据，并创建一个唯一名称数组。可能有几种方法可以做到这一点，但这里有一种效果很好:

var uniqueNames = (function(a) {
  var output = [];
  a.forEach(function(d) {
    if (output.indexOf(d.name) === -1) {
      output.push(d.name);
    }
  });
  return output;
})(nodes);

这将创建一个空数组，然后遍历 nodes 数组的每个元素，如果节点名称在新数组中尚不存在，则将其添加。

然后您可以简单地将新数组设置为色标的域:

colors.domain(uniqueNames);

第 3 步。使用比例域构建图例

由于图例将取决于域，因此请确保在设置域后调用 drawLegend() 函数。

您可以通过调用 colors.domain().length 找到域中元素的数量(用于设置图例的高度)。然后对于图例的 .data()，您可以使用域本身。最后，要设置图例框的填充颜色，您可以在 d 上调用色标，因为域中的每个元素都是一个 name。以下是图例的这三个变化在实践中的样子:

var legend = d3.select("#legend").append("svg:svg")
  .attr("width", li.w)
  .attr("height", colors.domain().length * (li.h + li.s));

var g = legend.selectAll("g")
  .data(colors.domain())
  .enter().append("svg:g")
  .attr("transform", function(d, i) {
     return "translate(0," + i * (li.h + li.s) + ")";
  });

g.append("svg:rect")
  .attr("rx", li.r)
  .attr("ry", li.r)
  .attr("width", li.w)
  .attr("height", li.h)
  .style("fill", function(d) { return colors(d); });

仅此而已。希望对您有所帮助。

这是更新的 JSFiddle .

关于javascript - 改进 D3 序列旭日示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24582083/

javascript改进code34colorssvgd3.jslegendsunburst-diagram

有关javascript - 改进 D3 序列旭日示例的更多相关文章

  1. ruby - 是否有用于序列化和反序列化各种格式的对象层次结构的模式？ - 2

    给定一个复杂的对象层次结构，幸运的是它不包含循环引用，我如何实现支持各种格式的序列化？我不是来讨论实际实现的。相反，我正在寻找可能会派上用场的设计模式提示。更准确地说:我正在使用Ruby，我想解析XML和JSON数据以构建复杂的对象层次结构。此外，应该可以将该层次结构序列化为JSON、XML和可能的HTML。我可以为此使用Builder模式吗？在任何提到的情况下，我都有某种结构化数据-无论是在内存中还是文本中-我想用它来构建其他东西。我认为将序列化逻辑与实际业务逻辑分开会很好，这样我以后就可以轻松支持多种XML格式。 最佳答案 我最

  2. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  3. ruby - 在 Ruby 中比较序列 - 2

    假设我必须(小型到中型)阵列:tokens=["aaa","ccc","xxx","bbb","ccc","yyy","zzz"]template=["aaa","bbb","ccc"]如何确定tokens是否以相同的顺序包含template的所有条目？(请注意，在上面的示例中，应忽略第一个“ccc”，从而由于最后一个“ccc”而导致匹配。) 最佳答案 这适用于您的示例数据。tokens=["aaa","ccc","xxx","bbb","ccc","yyy","zzz"]template=["aaa","bbb","ccc"]po

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

  5. Ruby-vips 图像处理库。有什么好的使用示例吗？ - 2

    我对图像处理完全陌生。我对JPEG内部是什么以及它是如何工作一无所知。我想知道，是否可以在某处找到执行以下简单操作的ruby​​代码:打开jpeg文件。遍历每个像素并将其颜色设置为fx绿色。将结果写入另一个文件。我对如何使用ruby​​-vips库实现这一点特别感兴趣https://github.com/ender672/ruby-vips我的目标-学习如何使用ruby​​-vips执行基本的图像处理操作(Gamma校正、亮度、色调……)任何指向比“helloworld”更复杂的工作示例的链接——比如ruby​​-vips的github页面上的链接，我们将不胜感激!如果有ruby​​-

  6. ruby-on-rails - carrierwave:在序列化动态属性上安装 uploader - 2

    首先，我使用的是rails3.1.3和来自master的carrierwavegithub仓库的分支。我使用after_init钩子(Hook)来确定基于属性的字段页面模型实例并为这些字段定义属性访问器将值存储在序列化哈希中(希望它清楚我是什么谈论)。这是我正在做的事情的精简版:classPage省略mount_uploader命令让我可以访问我想要的属性。但是当我安装uploader时出现错误消息说“nil类的未定义新方法”我在源代码中读到有方法read_uploader和扩展模块中的write_uploader。我如何必须覆盖这些来制作mount_uploader命令使用我的“虚拟

  7. arrays - 如何在下面的示例中将两个值数组分组为 n 个值数组？ - 2

    我已经有很多两个值数组，例如下面的例子ary=[[1,2],[2,3],[1,3],[4,5],[5,6],[4,7],[7,8],[4,8]]我想把它们分组到[1,2,3],[4,5],[5,6],[4,7,8]因为意思是1和2有关系，2和3有关系，1和3有关系，所以1,2,3都有关系我如何通过ruby​​库或任何算法来做到这一点？ 最佳答案 这是基本Bron–Kerboschalgorithm的Ruby实现:classGraphdefinitialize(edges)@edges=edgesenddeffind_maximum_

  8. ruby - Google-api-ruby-client 翻译 API 示例 - 2

    很高兴看到google代码:google-api-ruby-client项目，因为这对我来说意味着Ruby人员可以使用GoogleAPI-s来完善代码。虽然我现在很困惑，因为给出的唯一示例使用Buzz，并且根据我的实验，Google翻译(v2)api的行为必须与google-api-ruby-client中的Buzz完全不同。.我对“Explorer”演示示例很感兴趣——但据我所知，它并不是一个探索器。它所做的只是调用一个Buzz服务，然后浏览它已经知道的关于Buzz服务的事情。对我来说，Explorer应该让您“发现”所公开的服务和方法/功能，而不一定已经知道它们。我很想听听使用这个

  9. ruby-on-rails - 我可以用鸭子类型(duck typing)改进这种方法吗？ - 2

    希望我没有误解“ducktyping”的含义，但从我读到的内容来看，这意味着我应该根据对象如何响应方法而不是它是什么类型/类来编写代码。代码如下:defconvert_hash(hash)ifhash.keys.all?{|k|k.is_a?(Integer)}returnhashelsifhash.keys.all?{|k|k.is_a?(Property)}new_hash={}hash.each_pair{|k,v|new_hash[k.id]=v}returnnew_hashelseraise"CustomattributekeysshouldbeID'sorPropertyo

  10. ruby - 是否有 SproutCore 或 Cappuccino 的现场演示/示例应用程序 - 2

    在他们的网站上找不到任何内容。我主要只是想看看哪个值得一试(当然是RIA)。谢谢 最佳答案 SproutCoredemos 关于ruby-是否有SproutCore或Cappuccino的现场演示/示例应用程序，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1419788/

随机推荐