Как изменить положение и размер всплывающей подсказки в 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

я не удосужился сделать данные в подсказке точно так, как в оригинальной скрипке, но обратил внимание на что позволяют изменить шрифт и положение подсказки.