Question

我无法在折线图中获得工具提示。我已经调整了代码，但有时它并没有向我显示错误。有人可以帮我在折线图中设置工具提示吗？

下面是我的CSS和完整的JS代码。

CSS：

div.tooltip {   
        position: absolute;         
        text-align: center;         
        white-space: normal;                    
        padding: 2px;               
        font-size: 14px;        
        background: whitesmoke; 
        border: 1px solid gray; 
        border-radius: 4px;         
        pointer-events: none;
        cursor: none;
    }

JavaScript的：

$(document).ready(function() {
var svg_co2_emission = d3.select("#svg_co2_emission"),
    margin_co2_emission = {top: 20, right: 20, bottom: 30, left: 40},
    width_co2_emission = +svg_co2_emission.attr("width") - margin_co2_emission.left - margin_co2_emission.right,
    height_co2_emission = +svg_co2_emission.attr("height") - margin_co2_emission.top - margin_co2_emission.bottom,
    g_co2_emission = svg_co2_emission.append("g").attr("transform", "translate(" + margin_co2_emission.left + "," + margin_world_population.top + ")");

var x_co2_emission = d3.scaleBand()
    .rangeRound([0, width_co2_emission])
    .padding(0.1)
    .align(0.1);
var y_co2_emission = d3.scaleLinear()
    .rangeRound([height_co2_emission, 0]);

var line_co2_emission = d3.line()
    .x(function(d) { return x_co2_emission(+d.year); })
    .y(function(d) { return y_co2_emission(+d.total_emission); });

// Tooltip
var tt_co2_emission = d3.select("#svg_co2_emission").append("div")  
    .attr("class", "tooltip")       
    .style("opacity", 0);

d3.csv("t2_carbon_emission.csv", type, function(error, data_co2_emission) {
  if (error) throw error;
  x_co2_emission.domain(data_co2_emission.map(function(d) { return +d.year; }));
  y_co2_emission.domain([0, d3.max(data_co2_emission, function(d) { return +d.total_emission; })]).nice();

  g_co2_emission.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height_co2_emission + ")")
      .call(d3.axisBottom(x_co2_emission))
      .selectAll("text")  
                  .style("text-anchor", "end")
                  .attr("dx", "-.8em")
                  .attr("dy", ".15em")
                  .attr("transform", "rotate(-65)" );;
  g_co2_emission.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y_co2_emission).ticks(10, "s"))
    .append("text")
      .attr("x", 2)
      .attr("y", y_co2_emission(y_co2_emission.ticks(10).pop()))
      .attr("dy", "0.35em")
      .attr("text-anchor", "start")
      .attr("fill", "#000")
      .text("CO2: Million Metric Tons of Carbon Per Year.");

  g_co2_emission.append("path")
      .datum(data_co2_emission)
      .attr("class", "line_world_population")
      .attr("d", line_co2_emission);

  // Tooltip
  g_co2_emission.on("mousemove", function(d) {
    tt_co2_emission.html("&nbspIn " + x_co2_emission + ", CO2 Emission was <strong>" + y_co2_emission + "Million Metric Tons</strong>.&nbsp")
      .style('top', d3.event.pageY - 12 + 'px')
      .style('left', d3.event.pageX + 25 + 'px')
      .style("opacity", 0.95);
  });

  g_co2_emission.on("mouseout", function() {
    tt_co2_emission.style("opacity", 0)
  });
});
function type(d, i, columns) {
  for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
  d.total = t;
  return d;
}
});

目前显示错误消息d.year doesn't exist。但是，如果我进行更改，它将不会显示错误，仍然没有工具提示。

提前致谢....

D3工具提示：无法使工具提示正常工作

0 个答案: