typescript - 在生产模式下构建 Angular 应用时，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 文件下的属性：

projects => [应用名称] => architect => build => configurations => production => optimization => scripts

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

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

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

调用‘all’函数的返回值似乎就是差值。

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

答案＃1

你的代码和调试输出指定

d3.values(grpProductType)

但看起来 grpProductType 是一个 crossfilter 分组对象，所以这会生成该对象方法的数组：

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

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

我认为这一定是自动完成驱动的软件开发，因为其意图对我来说难以理解。在开发模式下它可能可以工作，因为函数的最大值是.top()（按名称？），但在优化后的生产模式下，函数的名字变得更短且无意义，因此你调用了不同的函数。

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

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

或者如果你更想使用 .top()：

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