因为你已经在使用d3.symbol了，所以你可以只对圆使用symbolCircle，这样可以大大简化代码：

.attr("d", d => symbol.type(d === "D" ? d3.symbolTriangle : d3.symbolCircle)())

另外，each没有什么意义，你在彼此之上附加了几个元素（你可能认为你有7个元素，但看看你的SVG，你有49个）。
这是你的代码与这些变化：

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

var symbol = d3.symbol().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 legend = svg
  .append('g')
  .attr('id', 'legend')
  .selectAll("symbols")
  .data(keys)
  .enter()
  .append("path")
  .attr("d", d => symbol.type(d === "D" ? d3.symbolTriangle : d3.symbolCircle)())
  .attr("fill", d => colorOrdinalScale(d))
  .attr("transform", (d, i) => `translate(${100 + i * 70}, 20)`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="container"></div>

append（“circle）你在每个键上都附加了圆圈和三角形，在每个点上都附加了圆圈或三角形。我已经编辑了您的代码，以根据正在处理的索引过滤图例，并根据该索引进行转换。

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

var 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 legend = svg
.append('g')
.attr('id', 'legend')
.selectAll("symbols")
.data(keys)
.enter()

legend
.each((d,index) => {
  if (d === "D") {
    console.log("triangle", index)
    legend
    .filter(function (d, i) { return i == index;})
    .append("circle")
    .attr("r", 15)
    .style("fill", (d) => colorOrdinalScale(d)) 
    .attr("transform", (d, i) => `translate(${100 + index * 70}, 20)`)
  } 
  else {
    console.log("circle", index)
    legend
    .filter(function (d, i) { return i == index;})
    .append("path")
    .attr("d", triangle)
    .attr("fill", (d) => colorOrdinalScale(d))
    .attr("transform", (d, i) => `translate(${100 + index * 70}, 20)`);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="container"></div>