在生产模式下构建 Angular App 时，dc 图表看起来不同

如何解决在生产模式下构建 Angular App 时，dc 图表看起来不同

我目前正在开发一个应用程序，该应用程序使用 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 文件下的属性：

项目 => [应用名称] => 架构师 => 构建 => 配置 => 生产 => 优化 => 脚本

如果此标志为真，则发生逻辑错误，如果为假，则应用程序运行良好。

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

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

调用'all'函数的返回值似乎有所不同。

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

解决方法

您的代码和调试输出指定

d3.values(grpProductType)

但它看起来像 grpProductType 是一个交叉过滤器组对象，所以这会生成一个对象方法的数组：

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

value

我认为这一定是自动完成驱动的软件开发，因为我的意图是深不可测的。它可能在开发模式下工作，因为 functions 的最大值是 const maxY = d3.max(d3.values(grpProductType))(1)[0]?.value;（按名称？），但在优化的 prod 模式下，函数具有较短的无意义名称，因此您调用不同的函数。

无论如何，它是一个交叉过滤器组对象，因此您应该直接调用 .all() 来检索 bin。这将返回一个 .top() 对象数组，因此计算 {key,value} 的更好方法是：

maxY

或者，如果您更喜欢使用 const maxY = d3.max(grpProductType.all(),d => d.value);：

.top()