Question

我在D3JS散点图中有点。

使用此代码可以正常使用工具提示：

new JSONObject(inputStr)

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

 // 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); });

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

      .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"};)
      ;})

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);

注意：请注意引号，语法高亮显示可以帮助您发现不匹配。

D3.JS条件工具提示html

1 个答案: