在生产模式下构建 Angular 应用程序时，dc 图表看起来不同

Question

我目前正在开发一个使用 d3、dc 和 crossfilter 来呈现一些图表的应用程序。

crossfilter2：v1.4.6
d3: v3.5.17
dc: v2.2.1

我正在努力让 Y 刻度只显示没有小数点的整数。

当我运行我的应用程序处于 'ng serve' 的开发模式时，这是有效的。

但是当我在生产模式下构建我的应用程序时，Y 比例不一样。

真正唯一不同的是使用“ng serve”或“ng build --prod”。

设置刻度的代码是

  /* grpProductType is a crossfilter.Group*/
  const maxY = d3.max(d3.values(grpProductType))(1)[0]?.value;

  if (maxY < 7) {

    /* dcStepsByProductType is a dc.BarChart*/
    dcStepsByProductType.yAxis().ticks(maxY);

  }

我已经设法将导致问题的原因缩小到一定程度。问题是依赖于属性下的 angular.json 文件：

projects => [app name] => architect => build => configurations => production => optimization => scripts

如果此标志为真，则发生逻辑错误，如果为假，则应用运行正常。

值为真（有错误）时打印出来的日志是

当值为 false（工作正常）时，日志为

似乎调用 'all' 函数的 return 值是不同的。

我的问题是这可能是什么原因？

Answer 1

您的代码和调试输出指定

d3.values(grpProductType)

但看起来 grpProductType 是一个交叉过滤器组对象，因此这会生成一个对象方法数组：

然后您的代码继续计算这些 函数的最大值 ，然后使用参数 1 调用该函数，获取结果数组的第一个元素，并读取其字段 value（如果有）：

const maxY = d3.max(d3.values(grpProductType))(1)[0]?.value;

我认为这一定是自动完成驱动的软件开发，因为我无法理解其意图。它可能在开发模式下工作，因为函数的最大值是 .top() （按名称？）但在优化的产品模式下，函数具有较短的无意义名称，因此您可以调用不同的名称功能。

无论如何，它是一个crossfilter组对象，所以你应该直接调用.all()来检索bins。这将 return 一个 {key,value} 对象的数组，因此计算 maxY 的更好方法是：

const maxY = d3.max(grpProductType.all(), d => d.value);

或者，如果您更喜欢使用 .top()：

const maxY = grpProductType.top(1)[0].value;

在生产模式下构建 Angular 应用程序时，dc 图表看起来不同

dc charts look different when building Angular App in production mode

d3.js

crossfilter

typescript

dc.js

angular