Question

有没有办法在dimple.js图表中更改条形图顶部的工具提示位置及其大小。

如果有任何方式请告诉我。我使用＆＃34; getTooltipText＆＃34;更改了工具提示的文本。现在我必须改变工具提示的位置和大小。

这是我的小提琴：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.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

我并不打算将工具提示中的数据与您原来的小提琴中的数据完全相同，而是注意让您更改工具提示的字体和位置。

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

1 个答案: