dc.js 个条形图的不同颜色

Question

我正在尝试使用 d3.js 和 dc.js 创建条形图（不是行图）。我可以创建条形图，但它们都是相同的颜色。

我试过了：

序数颜色()
scaleOrdinal.range()
Renderlet
颜色访问器

但它们都为所有条形图提供一种颜色，除了 colorAccessor 根本不显示条形图。

我正在使用 dc.js（版本 3.0.2）和 d3.js（版本 5.4.0）和交叉过滤器（版本 1.3.5）。

有人可以告诉我一种方法，可以在我的每个条上获得不同的颜色吗？

这是我的代码：

fruits = [{
    "name": "apple",
    "cnt": 10
  },
  {
    "name": "orange",
    "cnt": 15
  },
  {
    "name": "banana",
    "cnt": 12
  },
  {
    "name": "grapefruit",
    "cnt": 2
  },
  {
    "name": "grapefruit",
    "cnt": 4
  },
  {
    "name": "pomegranate",
    "cnt": 1
  },
  {
    "name": "lime",
    "cnt": 12
  },
  {
    "name": "grape",
    "cnt": 50
  }
];

var ndx = crossfilter(fruits);

fruitDimension = ndx.dimension(function(d) {
    return d.name;
  }),
  sumGroup = fruitDimension.group().reduceSum(function(d) {
    return d.cnt;
  });

fruitColours = d3.scaleOrdinal().range(["red", "yellow", "purple", "pink", "green", "orange", "blue"]);

barChart
  //  .ordinalColors(["red", "yellow", "purple", "pink", "green", "orange", "blue"])
  //  .ordinalColors(fruitColours)
  //  .ordinalColors(["#79CED7", "#66AFB2", "#C96A23", "#D3D1C5", "#F5821F"])
  .width(768)
  .height(380)
  .x(d3.scaleBand())
  .xUnits(dc.units.ordinal)
  .brushOn(false)
  .xAxisLabel('Fruit')
  .yAxisLabel('Quantity Sold')
  .dimension(fruitDimension)
  .barPadding(0.1)
  .outerPadding(0.05)
  .group(sumGroup)
  .colorAccessor(["#79CED7", "#66AFB2", "#C96A23", "#D3D1C5", "#F5821F", "grey", "purple"])
//     .on("renderlet", function(chart){
//      var colors =d3.scaleOrdinal().domain(["apple", "orange", "banana", "grapefruit", "pomegranate", "lime", "grape"])
//          .range(["steelblue", "brown", "red", "green", "yellow", "grey", "purple"]);
//      chart.selectAll('rect.bar').each(function(d){
////           d3.select(this).attr("style", "fill: " + colors(d.key)); // use key accessor if you are using a custom accessor
//           d3.select(this).attr("style", "fill: " + colors(d.name)); // use key accessor if you are using a custom accessor
//      });
//  });
;

dc.renderAll();

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>School Donations Dashboard</title>

  <link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
  <link rel="stylesheet" href="vendor/css/dc.css" />
  <link rel="stylesheet" href="vendor/css/keen-dashboards.css" />
  <link rel="stylesheet" href="css/custom.css" />

</head>

<body>
  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="index.xhtml">Dashboard</a>
      </div>
    </div>
  </div>
  <div id="outer" class="container-fluid">
    <!-- Test Bar Chart -->
    <div class="chartWrapper">
      <div class="chartTitle">
        Bar Chart
      </div>
      <div class="chartStage">
        <div id="barChart"></div>
      </div>
    </div>
    <!-- Test Bar Chart -->
  </div>
  <!-- /outer -->
  <hr />


  <script src="vendor/js/jquery.min.js">
  </script>
  <script src="vendor" name="js/bootstrap.min.js">
  </script>
  <script src="vendor" name="js/crossfilter.js">
  </script>
  <script src="vendor/js/d3-v5.min.js">
  </script>
  <script src="vendor/js/d3-scale.min.js">
  </script>
  <script src="vendor/js/dc.js">
  </script>
  <script src="vendor/js/queue.js">
  </script>
  <script src="vendor/js/keen.min.js">
  </script>
  <script src="js/graph.js">
  </script>

</body>

</html>

Answer 1

看起来您运行遇到的问题是颜色访问器 (.colorAccessor()) and the color scale (.colors()) 的角色混淆。

在所有 dc.js 图表中，访问函数将用于获取确定颜色的值。然后这个值将通过色标来确定实际颜色。

这很方便，因为在大多数情况下，您的数据中不会包含实际颜色。色标从您的数据中获取一些值并将其映射到颜色。

当您指定 colorAccessor 时，您需要为其提供一个函数，该函数以 {key, value} 形式获取组提供的数据，并提取您想要映射到颜色的值。

如果您想更改使用的颜色，可以使用 .colors(), supplying a d3 scale appropriate for your data, or you can use the convenience functions .ordinalColors() or .linearColors() 并提供您想要的颜色。

这就是大多数图表所需的全部内容。但对于堆叠图（条形图和折线图），您还需要指定颜色访问器。这是因为默认情况下，stack mixin 使用图层（stack 名称）来设置颜色：

_chart.colorAccessor(function (d) {
    var layer = this.layer || this.name || d.name || d.layer;
    return layer;
});

(source)

因此，如果您想为每个栏使用独特的颜色，基于组键的颜色访问器是一个不错的选择：

chart
    .colorAccessor(d => d.key)
    .ordinalColors(["#79CED7", "#66AFB2", "#C96A23", "#D3D1C5", "#F5821F", "grey", "purple"]);

但是，您需要确保至少指定与条形一样多的序数颜色，因为当域大于运行ge.

时，序数比例将重复

Demo fiddle.

dc.js 个条形图的不同颜色

Different colours for dc.js barchart

dc.js