[英]dc charts look different when building Angular App in production mode
I'm currently working on an application that is using d3, dc, and crossfilter to render some charts.我目前正在开发一个使用d3、dc 和 crossfilter来呈现一些图表的应用程序。
I was working on making the Y scale only showing inter numbers without a decimal point.我正在努力使 Y 比例仅显示没有小数点的内部数字。
This is working when I run my application in development mode with 'ng serve'.当我使用“ng serve”在开发模式下运行我的应用程序时,这是有效的。
But when I build my app in production mode the Y scale is not the same.但是当我在生产模式下构建我的应用程序时,Y 比例是不一样的。
Really the only thing different here is using "ng serve" or "ng build --prod".这里唯一不同的是使用“ng serve”或“ng build --prod”。
The code that sets the ticks is设置刻度的代码是
/* 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);
}
I have managed to narrow down what is causing the problem to a certain point.我已经设法将导致问题的原因缩小到某个点。 The problem is dependant on the property the angular.json file under:
问题取决于angular.json文件下的属性:
projects => [app name] => architect => build => configurations => production => optimization => scripts
项目 => [应用名称] => 架构师 => 构建 => 配置 => 生产 => 优化 => 脚本
If this flag is true then the logic error occurs, if false then the app runs fine.如果此标志为真,则发生逻辑错误,如果为假,则应用程序运行良好。
The logs when printing out when the value is true (with error) are当值为真(有错误)时打印出的日志是
When the value is false (working correctly) then the logs are当值为 false(正常工作)时,日志为
It seems the return value from invoking the 'all' function is the difference.调用“all”函数的返回值似乎有所不同。
My question is what could be possible reasons for this?我的问题是这可能是什么原因?
Your code and your debug output specify您的代码和调试输出指定
d3.values(grpProductType)
but it looks like grpProductType
is a crossfilter group object, so this produces an array of the methods of the object:但看起来
grpProductType
是一个grpProductType
器组对象,所以这会生成一个对象方法的数组:
Then your code proceeds to compute the maximum of these functions , and then calls that function with a parameter 1
, takes the first element of the resulting array, and reads its field value
if any:然后您的代码继续计算这些函数的最大值,然后使用参数
1
调用该函数,获取结果数组的第一个元素,并读取其字段value
如果有):
const maxY = d3.max(d3.values(grpProductType))(1)[0]?.value;
I think this must be autocomplete-driven software development, because the intention is inscrutable to me.我认为这一定是自动完成驱动的软件开发,因为我的意图是高深莫测的。 It probably works in develop mode because the maximum of the functions is
.top()
(by name?) but in optimized prod mode the functions have shorter nonsense names, so you call a different function.它可能在开发模式下工作,因为函数的最大值是
.top()
(按名称?)但在优化的生产模式下,函数的名称更短,因此您调用不同的函数。
Anyway, it's a crossfilter group object, so you should directly call .all() to retrieve the bins.无论如何,它是一个交叉过滤器组对象,因此您应该直接调用.all()来检索垃圾箱。 This will return an array of
{key,value}
objects, so a better way to calculate maxY
is:这将返回一个
{key,value}
对象数组,因此计算maxY
的更好方法是:
const maxY = d3.max(grpProductType.all(), d => d.value);
Or if you prefer to use .top()
:或者,如果您更喜欢使用
.top()
:
const maxY = grpProductType.top(1)[0].value;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.