时间戳

首页 > 解决方案 > 在生产模式下构建 Angular App 时，dc 图表看起来不同

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

问题描述

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

我正在努力使 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”函数的返回值是不同的。

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

标签： angulartypescriptd3.jsdc.jscrossfilter

解决方案

您的代码和调试输出指定

d3.values(grpProductType)

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

d3.values 调试

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

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

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

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

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

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

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

推荐阅读