如何更改dimple.js中工具提示的位置和大小

Question

是否有任何方法在條形圖頂部更改工具提示位置及其在dimple.js圖表​​中的大小。

如果有什麼方法，請讓我知道。我使用「getTooltipText」更改了工具提示的文本。現在我必須改變工具提示的位置和大小。

這裏是我的小提琴：http://jsfiddle.net/keshav_1007/pwr7043d/7/

var yMax = 1.2; 
      var svg1 = dimple.newSvg("body", 370, 230); 
      var data = [{ 
      "Brand":"A", 
      "Day":"Mon", 
      "SalesVolume":10 }, 
      { 
      "Brand":"B", 
      "Day":"Mon", 
      "SalesVolume":20 }]; 
      var myChart = new dimple.chart(svg1, data); 
      myChart.setBounds(120, 10, 170, 150) 

      var x = myChart.addCategoryAxis("x", "Day"); 
      var y = myChart.addMeasureAxis("y", "SalesVolume"); 
      var s = myChart.addSeries("SalesVolume",dimple.plot.bar); 
      s.getTooltipText = function (e) { 
       return [ 
        ""+e.aggField[0]+"" 
       ]; 
      }; 
      s.barGap=0.7; 
      myChart.draw(); 

      var defs = svg1.append("defs"); 
      defs.append("marker") 
      .attr("id", "triangle-start") 
      .attr("viewBox", "0 0 10 10") 
      .attr("refX", 10) 
      .attr("refY", 5) 
      .attr("markerWidth", 10) 
      .attr("markerHeight", 10) 
      .attr("orient", "auto") 
      .append("path") 
      .attr("class", "marker") 
      .attr("d", "M 0 0 L 10 5 L 0 10 z"); 

      svg1.append("line") 
      .attr("x1", 140) 
      .attr("x2", 295) 
      .attr("y1", y._scale(0.5)) 
      .attr("y2", y._scale(0.5)) 
      .attr("marker-start", "url(#triangle-start)"); 

Answer 1

您必須覆蓋標準工具提示的行爲，這意味着你將定義整個工具提示風格和內容。

爲此，您可以爲您的S系列如下：

 s.addEventHandler("mouseover", function (e){ 
       // Draw the text information 
       svg1.selectAll(".dimple-hover-text") 
        .data([e.xValue, d3.format(",.f")(e.yValue)]) 
        .enter() 
        .append("text") 
        .attr("class", "dimple-hover-text") 
    // Set the x and y positions of your tooltip 
        .attr("x", 200) 
        .attr("y", function (d, i) { return myChart._yPixels() + 20 + i * 25; }) 
    //desired font style      
        .style("font-family", "courier new") 
        .style("text-anchor", "end") 
    //desired font-size 
        .style("font-size", "30px") 
    //desired font-color  
        .style("fill", "#ffccb6")   
        .style("pointer-events", "none") 
        .text(function (d) { return d; });//the text to be displayed, taken from .data() 

       }); 

       // Clear the text on exit 
       s.addEventHandler("mouseleave", function (e) { 
       svg1.selectAll(".dimple-hover-text").remove(); 
       }); 

，因爲你需要爲你的工具提示這種方式，用了CSS，你幾乎可以使外觀與您可以添加儘可能多的造型默認工具提示。 這裏是Updated Fiddle

我還沒有打擾，使工具提示中的數據完全一樣，在你原來的小提琴，但注意讓你改變字體和工具提示的位置。