如何在D3中为分类数据点创建独立不重复的标签？

问题说明 #

现有包含myletters列的CSV文件，A对应3行、B对应6行、C对应11行、D对应18行。已实现根据字母值在指定坐标生成圆形节点的效果，但添加分类标签时出现两个问题：

• 绑定全量数据时，同一标签重复叠加，D的标签因重复次数多颜色过深
• 绑定唯一值集合后，每个标签框内显示全部A、B、C、D字母

解决方案 #

核心是给标签绑定唯一值集合，同时针对单个字母数据调整坐标和样式的访问逻辑：

修改后的关键代码 #

const margin = {left: 170, top: 50, bottom: 50, right: 20}
const width = 1000 - margin.left - margin.right
const height = 950 - margin.top - margin.bottom

const coordinates = {
    'A': [300,150],
    'B': [450,150], 
    'C': [300,400],
    'D': [450,400] 
};    

const svg = d3.select("#vis")
    .append('svg')
    .attr('width', 1000)
    .attr('height', 950)
    .attr('opacity', 1)
    
const x = d3.scaleOrdinal()
    .domain([1, 2, 3,4])
    .range([150,300,450,550])

const color = d3.scaleOrdinal()
    .domain([1, 2, 3,4])
    .range([ "#F8766D", "#00BA38", "#619CFF","#666666"])
 
d3.csv('../data/testdata.csv').then(data => {
    const xAccessor = d => d.myletters;

    // 生成唯一字母集合
    const unique_value = [...new Set(data.map(item => item.myletters))];

    // 圆形节点逻辑保持不变
    const nodes = svg.selectAll("circle")
        .data(data)
        .enter()
        .append('circle')
        .style("fill", d=> color(xAccessor(d)))
        .style("fill-opacity", 0.8)
        .attr("stroke", "black")
        .attr('r', 7)
        .style("stroke-width", 1);

    simulation = d3.forceSimulation(data)
        .force('forceX',d3.forceX(d=> coordinates[xAccessor(d)][0]))
        .force('forceY',d3.forceY(d=> coordinates[xAccessor(d)][1]))
        .force("center", d3.forceCenter().x(width / 2).y(height / 2))
        .force("charge", d3.forceManyBody().strength(10))
        .force("collide", d3.forceCollide().strength(1).radius(8).iterations(5))
        .on("tick", function(d){
            nodes.attr('cx', d => d.x).attr('cy', d => d.y);
        });

    // --- 修改标签部分：绑定唯一值数据 ---
    // 添加标签矩形
    svg.selectAll('my_rect')
        .data(unique_value)
        .enter()
        .append('rect')
        .attr('x', letter => coordinates[letter][0] - 25) // 让矩形居中于目标坐标
        .attr('y', letter => coordinates[letter][1] - 15)
        .attr('width',50)
        .attr('height', 30)
        .style("fill", letter => {
            // 映射字母到color比例尺的domain值
            const domainMap = {'A':1, 'B':2, 'C':3, 'D':4};
            return color(domainMap[letter]);
        })
        .style("fill-opacity", 0.2)
        .attr("stroke", "#989898");

    // 添加标签文本
    svg.selectAll('mytext')
        .data(unique_value)
        .enter()
        .append('text')
        .attr('x', letter => coordinates[letter][0])
        .attr('y', letter => coordinates[letter][1] + 5) // 调整文本垂直居中
        .attr('font-size','12px')
        .attr('text-anchor','middle')
        .text(letter => letter);
})

关键修改点 #

• 标签的矩形和文本均绑定unique_value集合，确保每个字母仅生成一个标签
• 调整矩形的x、y坐标，让标签居中对应到目标坐标点
• 文本直接使用绑定的字母作为内容，避免显示全部字母
• 添加字母到数字的映射，确保颜色比例尺能正确匹配每个字母的颜色

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