D3.js中如何根据数据项条件渲染不同图例形状？

你的代码出现每个数据项同时渲染圆形和三角形的问题，核心原因是在each回调中操作了整个enter选择集，而非当前数据对应的单个元素：

• 原代码里的legend是包含所有7个数据项的enter选择集
• 每次执行legend.append()时，会给选择集中的每一个元素都添加新形状
• 比如处理第一个数据"A"时，会给所有7个位置都加圆形；处理"D"时，又给所有7个位置都加三角形，最终每个位置都有两种形状重叠

修正方案1：直接根据数据动态创建元素 #

通过append()的函数形式，针对每个数据项创建对应的形状元素：

const keys = ["A", "B", "C", "D", "E", "E", "G"]
const colors = ['#1e90ff', '#008000', '#d3d3d3', '#d3d3d3', '#fe0000', '#ffa500', '#800080']

const triangle = d3.symbol().type(d3.symbolTriangle).size(500);

const colorOrdinalScale = d3
  .scaleOrdinal()
  .domain(keys)
  .range(colors);

const svg = d3
  .select("#container")
  .append("svg")
  .attr("class", "svg-area")
  .attr("width", 600)
  .attr("height", 500)

svg.append('g')
  .attr('id', 'legend')
  .selectAll(".legend-item")
  .data(keys)
  .enter()
  // 根据数据创建对应SVG元素
  .append(d => {
    const ns = d3.namespaces.svg;
    return d === "D" 
      ? document.createElementNS(ns, "path") 
      : document.createElementNS(ns, "circle");
  })
  // 动态设置元素属性
  .attrs(d => {
    return d === "D"
      ? { d: triangle, fill: colorOrdinalScale(d) }
      : { r: 15, fill: colorOrdinalScale(d) };
  })
  .attr("transform", (d, i) => `translate(${100 + i * 70}, 20)`);

修正方案2：先创建分组容器，再添加对应形状 #

这种方式结构更清晰，便于后续扩展（比如添加文字标签）：

const keys = ["A", "B", "C", "D", "E", "E", "G"]
const colors = ['#1e90ff', '#008000', '#d3d3d3', '#d3d3d3', '#fe0000', '#ffa500', '#800080']

const triangle = d3.symbol().type(d3.symbolTriangle).size(500);

const colorOrdinalScale = d3
  .scaleOrdinal()
  .domain(keys)
  .range(colors);

const svg = d3
  .select("#container")
  .append("svg")
  .attr("class", "svg-area")
  .attr("width", 600)
  .attr("height", 500)

// 先为每个数据项创建分组容器
const legendGroups = svg.append('g')
  .attr('id', 'legend')
  .selectAll(".legend-group")
  .data(keys)
  .enter()
  .append('g')
  .attr("transform", (d, i) => `translate(${100 + i * 70}, 20)`);

// 给每个分组添加对应形状
legendGroups.each(function(d) {
  const group = d3.select(this);
  if (d === "D") {
    group.append("path")
      .attr("d", triangle)
      .attr("fill", colorOrdinalScale(d));
  } else {
    group.append("circle")
      .attr("r", 15)
      .style("fill", colorOrdinalScale(d));
  }
});

关键说明 #

• 两种方案都是针对单个数据项对应的元素进行操作，而非整个选择集
• 方案2的分组方式更适合复杂图例（比如需要添加文字、调整布局），方案1更简洁直接

内容的提问来源于stack exchange，提问作者Mush-A