2016-04-11 20 views
0

Şu anda D3 örneğini araştırıyorum ama araç ipuçlarını eklemek için çalışıyorum https://plnkr.co/edit/stHnntCknDUs0Xw6MlQ2?p=preview ama kendim yönetme. Burada yapılanD3 araç ipuçları nasıl eklenir

//Add tooltips 
    // Define the div for the tooltip 
     var div = d3.select("body").append("div") 
      .attr("class", "tooltip")    
      .style("opacity", 0); 

     // Add the scatterplot 
    countryEnter.selectAll("dot") 
     .data(data)   
    .enter().append("circle")        
     .attr("r", 5)  
     .attr("cx", function(d) { return x(d.date); })  
     .attr("cy", function(d) { return y(d.stat); })  
     .on("mouseover", function(d) {  
      div.transition()   
       .duration(200)  
       .style("opacity", .9);  
      div .html(formatTime(d.date) + "<br/>" + d.date) 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px");  
      })     
     .on("mouseout", function(d) {  
      div.transition()   
       .duration(500)  
       .style("opacity", 0); 
     }); 

http://c3js.org/samples/timeseries.html Sadece cant Yanlış elemana hover koyuyoruz

+0

cevabım sorunu çözmek vermedi ?? – thatOneGuy

cevap

0

çalışır hale edilir gibi

Bu yol ipucu ve işaretçileri eklemek istiyorum. Onları noktalara yerleştiriyorsunuz (bu, date özniteliğine sahip olmadığınız gibi verilerinizde mevcut değil).

countryEnter.append("path") 
     .attr("class", "line") 
     .attr("d", function(d) { return line(d.values); }) 
     .style("stroke", function(d) { return color(d.name); }) 
     .on("mouseover", function(d) { 
      console.log(d) 
      divTooltip.transition()  
       .duration(200)  
       .style("opacity", .9) 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px") 
      .innerHTML(formatTime(d.date) + "<br/>" + d.close) 

      })     
     .on("mouseout", function(d) {  
      divTooltip.transition()  
       .duration(500)  
       .style("opacity", 0); 
     }); 

Ama yine hata formatTime tanımlanmamıştır olsun: Ben ne yaptım

şöyle yolunda üzerine koyun olduğunu. Ancak sorun, araç ipucunun görüntülenmesini sağlayarak çözüldü. Yani kalanını çözme zor :) olmamalı

Güncelleme plunkr: https://plnkr.co/edit/zQY0Wen1plIMuwOMq3PE?p=preview

+0

Gösterilen noktalara sahipseniz, araç ipuçları iyi görünmelidir ... – thatOneGuy