时间戳

首页 > 解决方案 > d3.js 在文本属性中使用条件返回

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

问题描述

我有一个图例，它从我的数据集“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;
  })

小提琴添加

标签： d3.js

解决方案

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

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

工作小提琴。

如果这不是您正在寻找的解决方案，请告诉我。

推荐阅读