基于基准的不同形状

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时，它应该打印出一个三角形，其余的应该打印出一个圆圈。

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

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

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>

Answer 2

你犯了一个非常基本的错误， 当您编写语句 legend.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>