javascript - D3.JS 条件工具提示 html

Question

我在 D3JS 散点图中有点。

工具提示可以很好地处理这段代码:

 // draw dots
  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 7)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { return color(cValue(d));}) 
      .style("opacity", .95)
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(100)
               .style("opacity", .95);
          tooltip.html(" Seen on : " + d.url)
               .style("left", (d3.event.pageX) + 10 + "px")
               .style("top", (d3.event.pageY) - 200 + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", 0);
      })
      .style("cursor", 'pointer')                              
      .on('click', function(d) {
          var url = d.url;
          window.open(url); });

但我想包含一个 if...else 语句以更好地自定义工具提示的内部 html。所以我尝试了:

      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(100)
               .style("opacity", .95);
          tooltip.style("left", (d3.event.pageX) + 10 + "px")
               .style("top", (d3.event.pageY) - 200 + "px")
               .html(   if (d.category == "A") {return " Oh yeah ! Seen on : " + d.url"}
            else { return " So cool ! Check it out on : " + d.url"};)
      ;})

但我在 Firebug 控制台中收到以下错误:

SyntaxError: expected expression, got keyword 'if'

Answer 1

D3 是一种魔法，但您仍在编写 JS:您不能在需要表达式的地方编写语句。将其包装在一个函数中，

tooltip.html(function() { 
    if (d.category == "A") {
        return " Oh yeah ! Seen on : " + d.url;
    } else { 
        return " So cool ! Check it out on : " + d.url;
    }
})

或者使用三元运算符

tooltip.html((d.category == "A") ? "":"")

或一个变量

var html = (d.category == "A") ? "":"";
tooltip.html(html);

注意:请注意您的引号，语法突出显示可以帮助您发现不匹配的地方。