javascript - 在 d3 节点上调用 if…then 函数

Question

我正在尝试调用 d3 中的条件函数，但无法让此代码正常工作。

我的 d3 代码:

//create a div element within #container for each object
day = d3.select("#container").selectAll("div")
    .data(data)
    .enter()
        .append("div");

我想根据对象的 date 属性添加一个具有不同文本的 p 元素:

//get today's date
var today = new Date();

//if after today
if (Date.parse(d.date) > today) {

    //print 'after today!'
    day.append('p').text(function(d) { return "after today!" });

//otherwise
} else {

    //print 'today or before'
    day.append('p').text(function(d) { return "today or before!" });
};

有人可以帮我让它发挥作用吗？

Answer 1

您没有提及 d.date 的格式。如果它已经是日期，只需执行以下操作:

day
 .append('p')
 .text(function(d) { 
   return (d.date.getTime() > Date.now()) ? "after today!" : "before today!";
 });

如果不是日期，则转换为日期，然后调用 getTime()

编辑

对于您在评论中描述的情况，请使用 .each:

var data = [1,0,1];
      
var div = d3.select('body')
  .selectAll('div')
  .data(data)
  .enter()
  .append('div')
  .each(function(d){
    var self = d3.select(this);
    if (d === 1){
      self.append('p')
        .text('Hi Mom!')
    } else {
      self.append('img')
        .attr('src','https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png')
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>