Question

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

我试过了：

ordinalColors（）
scaleOrdinal.range（）
Renderlet
colorAccessor

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

我使用dc.js（版本3.0.2）和d3.js（版本5.4.0）和crossfilter（版本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()）的角色和颜色标度（.colors()）之间的混淆。

在所有dc.js图表中，将使用访问器函数来获取应确定颜色的值。然后，该值将通过颜色标度传递，以确定实际颜色。

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

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

如果您想更改使用的颜色，可以使用.colors()，提供适合您数据的d3比例，或者您可以使用便捷功能.ordinalColors()或.linearColors()给他们你想要的颜色。

但是对于堆积图表，您仍然需要指定颜色访问器。默认情况下，所有堆叠图表都使用图层来键入颜色：

_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"]);

但是，您需要确保至少指定与条纹一样多的序数颜色，因为当域的大小大于范围时，序数比例将重复。

Demo fiddle.

d3条形图

1 个答案: