javascript - 将多个选项附加到 d3 中的 html

Question

我在 d3 中有一个时间线，它使用来自 Wordpress 中的帖子的数据，这些数据采用 JSON 格式。时间线上的项目有工具提示，显示一些内容，包括项目的开始和结束时间。时间线和工具提示都工作正常，只是我有两个条件可以更改工具提示中显示的内容，并且一次只能让其中一个条件工作。

这两个条件是:

1. 如果开始日期与结束日期相同，我们只显示开始日期。否则我们将显示 startDate + "到 "+ endDate。
2. 日期可能仅显示为年、月和年，或日、月和年，具体取决于帖子的输入。

所以我有三种不同的日期格式(都工作正常):

var displayDate = d3.time.format("%d %b %Y");
var displayMonthYear = d3.time.format("%b %Y");
var displayYear = d3.time.format("%Y");

我可以使用第一个条件将 html 附加到工具提示:

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset(function(d) { if (xTimeline(d.endDate)  > 800) { return [-10, 8] } else { return [-10, -8]  } })
  .html(function(d) {
    if ((xTimeline(d.endDate) - xTimeline(d.startDate) == 0)) {
      return d.title + "<br/><p>" + displayDate(d.startDate) + "</p>" + d.content; }
    else { 
      return d.title + "<br/><p>" + displayDate(d.startDate) + " to " + displayDate(d.endDate) + "</p>" + d.content; }
  });

或者第二个:

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset(function(d) { if (xTimeline(d.endDate)  > 800) { return [-10, 8] } else { return [-10, -8]  } })
  .html(function(d) { if (d.dateFormat == "Year only") {
  return d.title + "<br/><p>" + displayYear(d.startDate) + "</p>" + d.content; 
  }
  else if (d.dateFormat == "Month and year") {
return d.title + "<br/><p>" + displayMonthYear(d.startDate) + "</p>" + d.content; 
  }
  else {
return d.title + "<br/><p>" + displayDate(d.startDate) + "</p>" + d.content; 
  }
  });

但我缺乏将它们结合起来的技能。我尝试将第二个变成 var 或函数，但我似乎无法使其工作。

我怀疑这对于精通 Javascript 的人来说确实很简单，但现阶段我还不是这样。

非常感谢任何帮助。

Answer 1

@tgerard:在重新阅读您的问题并意识到我没有提供您所要求的内容后，我删除了之前的答案。我认为以下代码是您真正想要的:

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset(function(d) {
      if (xTimeline(d.endDate)  > 800) {
        return [-10, 8];
      } else {
        return [-10, -8];
      }
  })
  .html(function(d) {
    var toolTipContent = "";
    if ((xTimeline(d.endDate) - xTimeline(d.startDate) == 0)) {
      toolTipContent = getToolTipContent(d, true);
    } else {
      toolTipContent = getToolTipContent(d, false);
    }
    return toolTipContent;
  });

function getToolTipContent(d, sameDates) {
  var toolTipContent = d.title + "<br/><p>";
  if (d.dateFormat == "Year only") {
    toolTipContent +=  (sameDates)
      ? displayYear(d.startDate)
      : displayYear(d.startDate) + " to " + displayYear(d.endDate);
  } else if (d.dateFormat == "Month and year") {
    toolTipContent +=  (sameDates)
      ? displayMonthYear(d.startDate)
      : displayMonthYear(d.startDate) + " to " + displayMonthYear(d.endDate);
  } else {
    toolTipContent +=  (sameDates)
      ? displayDate(d.startDate)
      : displayDate(d.startDate) + " to " + displayDate(d.endDate);
  }
  toolTipContent += "</p>" + d.content;
  return toolTipContent;
}

在 getToolTipContent 函数中，我们检查日期格式的三个条件:

1. 仅限年份
2. 月份和年份
3. 其他内容(完整日期)

然后，对于每个条件，我们使用三元运算符来决定将哪些内容附加到 toolTipContent 字符串。因此，如果 'sameDates' 计算结果为 true，则 '?' 之后的部分被附加。如果 'sameDates' 计算结果为 false，则附加 ':' 后面的部分。

祝您的项目顺利!如果您对上述代码有任何疑问，请告诉我。