修改D3.js圆形打包图代码后页面空白，是什么问题？

你代码中的核心错误点 #

• 语法不完整：data 数组定义后缺少闭合的]，导致JS语法报错直接停止执行
• 字段名不匹配：你后续代码调用了d.value（计算气泡大小）、d.region（匹配颜色）两个字段，但自定义数据里没有这两个字段，只有Asia、国家名这类无对应逻辑的键
• 布局逻辑缺失：所有气泡的cx、cy属性都固定为画布中心，即使渲染成功也会全部重叠
• 事件未定义：绑定了mouseover事件但没有写对应的mouseover函数实现

修正后的可运行参考代码 #

<div id="my_dataviz"></div>

<script>
// 运行前请先引入d3.v7版本的依赖库
// 画布尺寸
const width = 500
const height = 500

// 挂载svg
const svg = d3.select("#my_dataviz")
  .append("svg")
  .attr("width", width)
  .attr("height", height)

// 修正后的数据结构，统一加region、name、value三个字段匹配后续逻辑
const data = [
  { region: "Asia", name: "Burundi", value: 3.14 },
  { region: "Asia", name: "South Sudan", value: 3.39 },
  { region: "Europe", name: "France", value: 67 },
  { region: "Africa", name: "Nigeria", value: 223 },
  { region: "Americas", name: "Canada", value: 39 },
  { region: "Oceania", name: "Australia", value: 26 }
]

// 颜色比例尺
const color = d3.scaleOrdinal()
  .domain(["Asia", "Europe", "Africa", "Oceania", "Americas"])
  .range(d3.schemeSet1)

// 气泡大小比例尺，按数据最大值调整domain即可
const size = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([7, 55])

// 力导向布局实现气泡不重叠自动排布
const simulation = d3.forceSimulation(data)
  .force("x", d3.forceX(width / 2).strength(0.1))
  .force("y", d3.forceY(height / 2).strength(0.1))
  .force("collide", d3.forceCollide(d => size(d.value) + 2))
  .tick(ticked)

// 绘制气泡
const node = svg.append("g")
  .selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("r", d => size(d.value))
  .style("fill", d => color(d.region))
  .style("fill-opacity", 0.8)
  .attr("stroke", "black")
  .style("stroke-width", 1)
  // 鼠标悬停显示对应数据示例，可根据需要修改显示逻辑
  .on("mouseover", (event, d) => {
    console.log(`地区：${d.region}，国家：${d.name}，数值：${d.value}`)
  })

// 布局更新时修改气泡坐标
function ticked() {
  node
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
}
</script>

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