javascript - 如何在 Plottable.js/D3.js 制作的 Piechart 中启用 qtip2

Question

我有这段代码，它试图启用 qtip in plottable.js

var store = [{ Name:"Item 1", Total:18.73424242 },
               { Name:"Item 2", Total:7.34311 },
               { Name:"Item 3", Total:3.1235535},
               { Name:"Item 4", Total:12.763574}];
  

  var colorScale = new Plottable.Scales.Color();
  var legend = new Plottable.Components.Legend(colorScale);

  var pie = new Plottable.Plots.Pie()
  .attr("fill", function(d){ return d.Name; }, colorScale)
  .addDataset(new Plottable.Dataset(store))
  .attr("qtip2-title", function(d) { return '<div class="bartip">' + d.Name + " (" + d.Total.toFixed(2) + ')</div>'; })
  .addClass("tooltipped")
  .sectorValue(function(d){ return d.Total; } )
  .labelsEnabled(true);
 

    
    
  new Plottable.Components.Table([[pie, legend]]).renderTo("#chart");


/*
// Adding this block does not work
$(".tooltipped rect").qtip({
              overwrite: true,
              content: {
              text: function() {
                return $(this).attr("qtip2-title");
                    }
             },

                position: {
                  my: "bottom middle",
                  at: "top middle"
                },
                style: {
                   classes: "qtip-light"
                }
          });
          
   */

<link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.js"></script>

<div id="container">
  <svg id="chart" width="350" height="350"></svg>
</div>

正如您所注意到的，qtip2 Javascript 代码似乎不起作用。我怎样才能让它工作？

Answer 1

第 1 步

您需要包含 jQuery，因为 qTip 依赖于 jQuery。

第 2 步

将工具提示信息存储在某个属性中，这里我使用属性名称​​title

.attr("title", function(d) {
    return "" + d.Total.toFixed(2);//storing the tooltip info in attribute title
  })

将类工具提示添加到路径。

  .attr("class", "tooltipped")

第3步

使用 jQuery 选择器将其附加到所有具有类 tooltipped 的路径

// Adding this block which will work
//selector to select all path with class tooltipped
$(".tooltipped").qtip({
  overwrite: true,
  content: {
    text: function(d) {
      return ($(this).attr("title"));//returning the tooltip
    }
  },

  position: {
    at: "top middle"
  },
  style: {
    classes: "qtip-light"
  }
});

工作代码here或如下:

var store = [{
  Name: "Item 1",
  Total: 18.73424242
}, {
  Name: "Item 2",
  Total: 7.34311
}, {
  Name: "Item 3",
  Total: 3.1235535
}, {
  Name: "Item 4",
  Total: 12.763574
}];


var colorScale = new Plottable.Scales.Color();
var legend = new Plottable.Components.Legend(colorScale);

var pie = new Plottable.Plots.Pie()
  .attr("fill", function(d) {
    return d.Name;
  }, colorScale)
  .addDataset(new Plottable.Dataset(store))
  .attr("title", function(d) {
    return "" + d.Total.toFixed(2);//storing the tooltip info in attribute title
  })
  .attr("class", "tooltipped")
  .sectorValue(function(d) {
    return d.Total;
  })
  .labelsEnabled(true);




new Plottable.Components.Table([
  [pie, legend]
]).renderTo("#chart");



// Adding this block does not work
//selector to select all path with class tooltipped
$(".tooltipped").qtip({
  overwrite: true,
  content: {
    text: function(d) {
      return ($(this).attr("title"));//returning the tooltip
    }
  },

  position: {
    at: "top middle"
  },
  style: {
    classes: "qtip-light"
  }
});

<link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.js"></script>


<div id="container">
  <svg id="chart" width="350" height="350"></svg>
</div>