javascript - 根据基准不同的形状

Question

当其中一个值满足如下条件时，我尝试附加另一个形状:

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 => {
  if (d === "D") {
    console.log("triangle", d)
    legend
    .append("circle")
    .attr("r", 15)
    .style("fill", (d) => colorOrdinalScale(d)) 
    .attr("transform", (d, i) => `translate(${100 + i * 70}, 20)`)
  } 
  else {
    console.log("circle", d)
    legend
    .append("path")
    .attr("d", triangle)
    .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>

应该发生的是，当键等于D时，它应该打印出一个三 Angular 形，其余的应该打印出一个圆形。

据我了解，逻辑似乎是有效的。但结果是为每个数据打印一个三 Angular 形和一个圆形。但是，日志显示相应的代码块正在运行。

基本上，这是我期待的结果:

Answer 1

由于您已经在使用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>