d3工具提示不同的文本取决于正值和负值

时间:2014-05-25 19:13:35

标签: javascript d3.js

我想知道为什么不可能做以下事情:

div.text(function(d) {return " bought " + d.USD;})

它适用于代码中较早的红色或绿色圆圈:

  .style("fill", function(d) {if (d.USD <= 0) {return "green"} 
                      else      { return "red" };})

以下是我的代码摘录,负责绘制圆圈并添加工具提示:

// Draw circle around values

svg.selectAll("dot")

  .data(bitstamp_data)
  .enter().append("circle")
  .attr("r", function(d) { return Math.sqrt(Math.abs(d.USD)) - 5; })
  .attr("cx", function(d) { return x(d.date); })
  .attr("cy", function(d) { return y(d.Price); })
  .style("fill-opacity", 0.7)
  .attr("stroke", "black")

// Show different colour depending on buying or selling USD based on positive or negative d.USD
  .style("fill", function(d) {
    if (d.USD <= 0) {return "green"} 
    else        { return "red" }
    ;})

// Tooltip section
  .on("mouseover", function(d) {
    div.transition()
      .duration(400)
      .style("opacity", .9);

    div.text(function(d) {return " bought " + d.USD
              ;})

      .style("left", (d3.event.pageX + 15) + "px")
  .attr("stroke", "black")
      .style("top", (d3.event.pageY - 28) + "px");

    })

0 个答案:

没有答案