javascript - d3 饼图全黑填充,d3.schemeCategory20c 未被调用

标签 javascript jquery d3.js

因为这被标记为重复,让我澄清一下我的问题是不是我得到一个Uncaught TypeError: d3.schemeCategory20 错误,如post that is suggested事实上,如果您查看我的代码和我正在以与接受的答案相同的方式调用电话的代码。 如果阅读我的问题,我的图表填充颜色全是黑色,我的问题d3.schemeCategory20c 数组似乎根本没有被调用。我没有错误,但该方法有意外输出。

我正在阅读 Barrett ClarkData Visualization Toolkit 一书的第一章。我更新了代码以反射(reflect) d3 v4 中的变化,但我的饼图以一种颜色呈现,这里是我的 scaleOrdinal 分配

var color = d3.scaleOrdinal(d3.schemeCategory20c);

这是 json 调用:

$.getJSON('/residential/data', function(data) {
    totals = data.totals;
    var g = svg.selectAll('.arc').data(pie(d3.keys(totals))).enter()
      .append('g').attr('class', 'arc');

    g.append('path').attr('d', arc).style('fill', function(d) { return color(d.data); });

    g.append('text').attr('transform',
      function(d) { return 'translate('+ arc.centroid(d) +')'; }).attr('dy', '.35em')
      .style('text-anchor', 'middle').text(function(d) { return d.data; });
  });

这呈现了一个很棒的饼图,每个切片都用黑色填充,我已经尝试阅读文档但似乎找不到这个实现。我从其他 tuts 中剔除了这应该有效,但它没有。

最佳答案

我的答案在 Changes in D3 5.0 中找到文档。

D3 no longer provides the d3.schemeCategory20* categorical color schemes. These twenty-color schemes were flawed because their grouped design could falsely imply relationships in the data: a shared hue can imply that the encoded data are part of a group (a super-category), while relative lightness can imply order. Instead, D3 now includes d3-scale-chromatic, which implements excellent schemes from ColorBrewer, including categorical, diverging, sequential single-hue and sequential multi-hue schemes. These schemes are available in both discrete and continuous variants.

我一直在寻找与 d3.schemeCategory20c 相关的问题,所以我不断收到旧帖子,今天早上我安慰了 d3.schemeCategory20c(我本应该做的事情前一阵子)并发现它是未定义的。我想通了。

关于javascript - d3 饼图全黑填充,d3.schemeCategory20c 未被调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52437079/

相关文章:

javascript - 如何在显示甜蜜警报后使用ajax在php中上传文件?

javascript - 使用 jquery 通过 id 引用附加的 HTML 代码

javascript - 单击链接时屏幕变暗然后重定向

jquery - 使用 Ajax.BeginForm Asp.Net MVC 显示 jquery 验证消息

javascript - 如何构建一个 jQuery 支持的切换器来添加/删除 css 属性?

带有对象数组的 JavaScript;对象中的属性有值,返回未定义

jquery - 如何删除 ASP.NET ImageButton 的边框

javascript - D3.js:圆半径比例未显示圆

javascript - JS/d3.js - 删除/合并 d3.js 节点图中的重复链接

d3.js - 可视化想法