Javascript 显示虚假数据的d3水平图

我试图使用d3的水平条形图，但它在我的代码中不断显示错误数据

//资料 var data=[{id:0，事件描述：读卡器错误，事件描述：462}，{id:0，事件描述：网络连接丢失，事件描述：392}，{id:0，事件描述：现金接收箱致命，事件描述：391}，{id:0，事件描述：正在服务的CAM，事件描述：378}，{id:0，事件描述：可能的篡改，事件计数：370}，{id:0，事件描述：BNA设备错误，事件计数：369}，{id:0，事件描述：CAM上可能的通信密钥错误，事件计数：366}，{id:0，事件描述：黑屏，事件计数：351}，{id:0，事件描述：现金接收箱错误，事件计数：196}，{id:0，事件描述：CAM停止服务，事件计数：194}]； /*折线图起点*/ $document.ready=>{ //设置图形的尺寸和边距 var margin={顶部：20，右侧：30，底部：40，左侧：200}， 宽度=700-边距。左侧-边距。右侧， 高度=400-margin.top-margin.bottom； //将svg对象附加到页面主体 var svg=d3.selectbarChart .appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attrtransform， 翻译+margin.left+，+margin.top+； //解析数据 //添加X轴 变量x=d3.缩放带 .范围[宽度，0] .domaindata.maps=>s.event\u计数； svg.appendg .attrtransform，translate0，+高度+ .calld3.x 。选择全部文本 .attransform，translate-10,0 rotate-45 .styletext锚定，结束； //Y轴 变量y=d3.缩放带 .范围[高度，0] .domaindata.mapfunction d{返回d.event_description；} .4； svg.appendg .calld3.axisLefty //栅栏 svg.selectAllmyRect .数据 进来 .appendrect .attrx，x0 .attry，函数d{return yd.event_description；} .attrwidth，函数d{return xd.event_count；} .高度，y.带宽 .attrfill，69b3a2 //.attrx，函数为{return xd.Country；} //.attry，函数d{return yd.Value；} //.宽度，x.带宽 //.attrheight，函数d{返回高度-yd.Value；} //.attrfill，69b3a2 }; /*折线图结束*/ 凸轮仪表板 /* -------------------------- 边栏样式 --------------------------- */ .包装纸{ 显示器：flex； 宽度：100%； 对齐项目：拉伸； } 边栏{ 最小宽度：250px； 最大宽度：250px； 背景：rgb60,95238； 颜色：fff； 过渡：均为0.3秒； } 侧边栏{ 左边距：-250px； } 边栏。边栏标题{ 填充：20px； 背景：RGB90121243； } 侧栏ul组件{ 填充：20px0； 边框底部：1px实心47748b； } 边栏{ 颜色：fff； 填充：10px； } 侧栏ul li a{ 填充：10px； 字体大小：1.1米； 显示：块； } 侧边栏ul li a：悬停{ 颜色：7386D5； 背景：fff； } 侧栏ul li.active>a， a[aria expanded=true]{ 颜色：fff； 背景：6d7fcc； } [数据切换=折叠]{ 位置：相对位置； } .下拉切换：：之后{ 显示：块； 位置：绝对位置； 最高：50%； 右：20px； 转化：translateY-50%； } 乌拉{ 字体大小：0.9em！重要； 左侧填充：30px！重要； 背景：6d7fcc； } ul.CTAs{ 填充：20px； } ul.CTAs a{ 文本对齐：居中； 字体大小：0.9em！重要； 显示：块； 边界半径：5px； 边缘底部：5px； } a、 下载{ 背景：fff； 颜色：7386D5； } a、 文章,， a、 文章：悬停{ 背景：6d7fcc！重要； 颜色：fff！重要； } /* -------------------------- 内容风格 --------------------------- */ 内容{ 宽度：100%； 填充：20px； 最小高度：100vh； 过渡：均为0.3秒； } /* -------------------------- 媒体查询 --------------------------- */ @介质最大宽度：768px{ 边栏{ 左边距：-250px； } 侧边栏{ 左边距：0； } 边栏坍塌跨距{ 显示：无； } } /*线叉 RT风格*/ .x轴路径{ 显示：无； } .线路{ 填充：无； 笔画：钢蓝； 笔划宽度：1.5px； } 跨度{ 文本对齐：居中； 显示：内联块； } -> -> -> -> 事件计数是一个定量变量。因此，应使用线性比例：

var x = d3.scaleLinear()
    .range([0, width])
    .domain([0, d3.max(data, (s) => s.event_count)]);

以下是仅包含该更改的代码：

//资料 风险值数据=[{ id:0， 事件描述：读卡器错误， 事件计数：462 }, { id:0， 事件描述：网络连接丢失， 事件计数：392 }, { id:0， 事件描述：现金接收箱致命， 事件计数：391 }, { id:0， 事件描述：正在服务的CAM， 事件计数：378 }, { id:0， 事件描述：可能的篡改， 事件计数：370 }, { id:0， 事件描述：BNA设备错误， 事件计数：369 }, { id:0， 事件描述：CAM上可能存在通信密钥错误， 事件计数：366 }, { id:0， 事件描述：黑屏， 事件计数：351 }, { id:0， 事件描述：现金接受BIN错误， 事件计数：196 }, { id:0， 事件描述：凸轮停止工作， 事件计数：194 }]; /*折线图起点*/ $document.ready=>{ //设置图形的尺寸和边距 var保证金={ 前20名， 右:30,， 底数：40， 左：200 }, 宽度=700-边距。左侧-边距。右侧， 高度=400-margin.top-margin.bottom； //将svg对象附加到页面主体 var svg=d3.selectbarChart .appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attrtransform， 翻译+margin.left+，+margin.top+； //解析数据 //添加X轴 var x=d3.scaleLinear .范围[0，宽度] .domain[0，d3.maxdata，s=>s.event_count]； svg.appendg .attrtransform，translate0，+高度+ .calld3.x 。选择全部文本 .attransform，translate-10,0 rotate-45 .styletext锚定，结束； //Y轴 变量y=d3.缩放带 .范围[高度，0] .domaindata.mapfunctiond{ 返回d.事件描述； } .4； svg.appendg .calld3.axisLefty //栅栏 svg.selectAllmyRect .数据 进来 .appendrect .attrx，x0 .attry，函数d{ 返回yd.event\u说明； } .attrwidth，函数d{ 返回xd.event\u计数； } .高度，y.带宽 .attrfill，69b3a2 //.attrx，函数为{return xd.Country；} //.attry，函数d{return yd.Value；} //.宽度，x.带宽 //.attrheight，函数d{返回高度-yd.Value；} //.attrfill，69b3a2 }; /*折线图结束*/ 凸轮仪表板 /* -------------------------- 边栏样式 --------------------------- */ .包装纸{ 显示器：flex； 宽度：100%； 对齐项目：拉伸； } 边栏{ 最小宽度：250px； 最大宽度：250px； 背景：rgb60,95238； 颜色：fff； 过渡：均为0.3秒； } 侧边栏{ 左边距：-250px； } 边栏。边栏标题{ 填充：20px； 背景：RGB90121243； } 侧栏ul组件{ 填充：20px0； 边框底部：1px实心47748b； } 边栏{ 颜色：fff； 填充：10px； } 侧栏ul li a{ 填充：10px； 字体大小：1.1米； 显示：块； } 侧边栏ul li a：悬停{ 颜色：7386D5； 背景：fff； } 侧栏ul li.active>a， a[aria expanded=true]{ 颜色：fff； 背景：6d7fcc； } [数据切换=折叠]{ 位置：相对位置； } .下拉切换：：之后{ 显示：块； 位置：绝对位置； 最高：50%； 右：20px； 转化：translateY-50%； } 乌拉{ 字体大小：0.9em！重要 T 左侧填充：30px！重要的 背景：6d7fcc； } ul.CTAs{ 填充：20px； } ul.CTAs a{ 文本对齐：居中； 字体大小：0.9em！重要； 显示：块； 边界半径：5px； 边缘底部：5px； } a、 下载{ 背景：fff； 颜色：7386D5； } a、 文章,， a、 文章：悬停{ 背景：6d7fcc！重要； 颜色：fff！重要； } /* -------------------------- 内容风格 --------------------------- */ 内容{ 宽度：100%； 填充：20px； 最小高度：100vh； 过渡：均为0.3秒； } /* -------------------------- 媒体查询 --------------------------- */ @介质最大宽度：768px{ 边栏{ 左边距：-250px； } 侧边栏{ 左边距：0； } 边栏坍塌跨距{ 显示：无； } } /*折线图样式*/ .x轴路径{ 显示：无； } .线路{ 填充：无； 笔画：钢蓝； 笔划宽度：1.5px； } 跨度{ 文本对齐：居中； 显示：内联块； } -> -> -> ->

---

作为补充，D3不是一个图表工具，所以D3没有水平条形图。