如何在使用D3的線條圖中使用工具提示js

Question

我正在嘗試在線圖中使用工具提示，但我不明白爲什麼工具提示值不會出現。同時我想在線圖被呈現時添加圓形標誌「o」的具體數字。我的意思是添加一些圓形符號。請在下面找到我的劇本

<script> 
     function ShowLineChart() { 

      var data = [ 
     { date: "1-jan-12", close: 5 }, 
     { date: "1-Feb-12", close: 100 }, 
     { date: "1-mar-12", close: 150 }, 
     { date: "1-apr-12", close: 90 }, 
     { date: "1-May-12", close:34 }, 
     { date: "1-jun-12", close: 67 }, 
     { date: "1-jul-12", close:67 }, 
     { date: "1-Aug-12", close: 79 } 
    ]; 
      var margin = { top: 20, right: 20, bottom: 30, left: 50 }, 
    width = 460 - margin.left - margin.right, 
    height = 200 - margin.top - margin.bottom; 

      var parseDate = d3.time.format("%d-%b-%y").parse; 

      var x = d3.time.scale() 
    .range([0, width]); 

      var y = d3.scale.linear() 
    .range([height, 0]); 

      var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

      var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

      var line = d3.svg.line() 
    .x(function (d) { return x(d.date); }) 
    .y(function (d) { return y(d.close); }); 


      var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function (d) { 
     return "<strong>Price($):</strong> <span style='color:red'>" + d.close +"</span>"; 
    }) 

      var svg = d3.select("#showLineChart").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
      svg.call(tip); 

       data.forEach(function (d) { 
        d.date = parseDate(d.date); 
        d.close = +d.close; 
       }); 

       x.domain(d3.extent(data, function (d) { return d.date; })); 
       y.domain(d3.extent(data, function (d) { return d.close; })); 

       svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

       svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Price ($)") 

       svg.append("path") 
     .datum(data) 
     .attr("class", "line") 
     .attr("d", line) 
     .on('mouseover', tip.show) 
     .on('mouseout', tip.hide) 
     .attr("y", function (d) { return d.close; }) 


     } 
</script> 

Answer 1

我假設你正在使用的labratrevenge/d3-tip腳本得到提示像here

這意味着你需要有元素到tip.hide和tip.show回調重視。

您可以通過添加圓點的圖表做到這一點，並附加回調到以下幾點：

svg.selectAll(".circle") 
    .data(data) 
    .enter() 
    .append("svg:circle") 
    .attr("class", "circle") 
    .attr("cx", function (d) { 
     return x(d.date); 
    }) 
    .attr("cy", function (d) { 
     return y(d.close); 
    }) 
    .attr("r", 5) 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide) 

看一看它在行動上jsfiddle。