D3.js text属性无法渲染后端数据库返回的Count1数值问题求助

问题原因 #

D3 的 .data() 方法仅支持传入数组类型的参数，你从接口获取到的 data 是单个对象（结构为 {Count1: 6}），直接传入后 enter 选择集为空，不会执行后续的 append 逻辑，因此页面没有生成对应的 <p> 元素，数值自然无法渲染。

解决方案 #

方案1：适配现有数据绑定逻辑 #

只需要把单个对象包装成数组传入 .data() 即可：

var data2 = d3.json("/Events/CountEmployees/").then(function (data) {
    d3.select("#data")
        .selectAll("p")
        .data([data]) // 单个对象包装为数组
        .enter()
        .append('p')
        .style("color", "red")
        .text(d => d.Count1);
})

方案2：简化写法（更适合单值渲染场景） #

你只需要渲染单个数值，不需要用到D3的enter/update/exit全流程，直接写更高效：

var data2 = d3.json("/Events/CountEmployees/").then(function (data) {
    d3.select("#data")
        .append('p')
        .style("color", "red")
        .text(data.Count1); // 直接取对象属性赋值即可
})

额外检查项 #

如果调整后仍无法显示，确认页面中已存在 id="data" 的DOM容器元素。

内容的提问来源于stack exchange，提问作者user10981554