d3.js在文本属性内使用条件返回

Question

我有一个图例，该图例从我的数据集“ data2”返回2个列名。

此函数返回文本：

.text(function(d) {
    return d;
  })

有一种方法可以有条件地更改文本，而不是更改列的名称。例如，当column = A时，则使用“ Field1”，否则使用“ Field2”

var legend = svg.selectAll(".legend")
  .data(data2)
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) {
    return "translate(0," + i * 20 + ")";
  });

legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

legend.append("text")
  .attr("x", width - 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .style("font-family", "raleway")
  .style("font-size", "8")
  .text(function(d) {
    return d;
  })

fiddle添加了

Answer 1

您可以在返回d的函数中使用条件返回语句。例如：

  .text(function(d) {
    if (d==="A") {
        return "Field1" 
    }else {
        return "Field2"
    }
  })

工作fiddle。

让我知道这是否不是您想要的解决方案。