Question

我在d3中有一个时间轴，它使用Wordpress中以JSON格式化的帖子中的数据。时间轴上的项目有工具提示，显示一些内容，包括项目的开始和结束时间。时间轴和工具提示都工作正常，但我有两个条件可以改变工具提示中显示的内容，我一次只能工作一个。

这两个条件是：

如果开始日期与结束日期相同，我们只显示开始日期。否则我们会显示startDate +“to”+ endDate。
日期可能只显示年份，月份和年份，或日期，月份和年份，具体取决于帖子的输入。

所以我有三种不同的日期格式（一切正常）：

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函数中，我们检查日期格式的三个条件：

仅限年份
月份和年份
其他（完整日期）

然后，对于这些条件中的每一个，我们使用三元运算符来决定要附加到toolTipContent字符串的内容。所以，如果相同的日期＆＃39;评估为真，在＆＃39;？＆＃39;之后的部分得到追加。如果相同日期＆＃39;评估为假，＆＃39;之后的部分：＆＃39;得到附加。

祝你的项目好运！如果您对上述代码有任何疑问，请与我们联系。

Answer 2

我认为你正在寻找这个，因为从我这样理解的问题，并把它给你。

index.html

如果你不是在寻找这个，请问我更多。你想要用屏幕截图显示什么，以便我可以得到它。

在d3中为html添加多个选项

2 个答案: