如何在 Plottable.js 多图中显示图例

Question

我有以下代码：

var indata = [{
  'sample': "Foo",
  "pies_pct": [{
    "score": 6.7530200000000002,
    "celltype": "Bcells"
  }, {
    "score": 11.432763461538459,
    "celltype": "DendriticCells"
  }]

}, {
  'sample': "Bar",
  "pies_pct": [{
    "score": 26.8530200000000002,
    "celltype": "Bcells"
  }, {
    "score": 31.432763461538459,
    "celltype": "DendriticCells"
  }]

}, ];



processData(indata);

function processData(data) {

  pies = data.map(function(data) {
    return {
      title: data.sample,
      dataset: data.pies_pct
    };


  });

  buildPlots();
}

function buildPlots() {
  var $pieContainer = $('#sample-pies');

  pies.forEach(function(pie, index) {
    var elementId = "sample-pie-" + index;

    $(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
      .css({
        width: '200px',
        height: '200px',
        display: 'inline-block'
      })
      .attr('id', elementId)
      .appendTo($pieContainer);


    plotSamplePie(pie.title, pie.dataset, '#' + elementId);
  });


}




function plotSamplePie(title, purity_data, targetElement) {
  var scale = new Plottable.Scales.Linear();
  var tableau20 = ['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728',
    '#9467BD', '#8C564B', '#CFECF9', '#7F7F7F', '#BCBD22', '#17BECF'
  ];
  var colorScale = new Plottable.Scales.Color();
  var legend = new Plottable.Components.Legend(colorScale);
  colorScale.range(tableau20);




  var titleLabel = new Plottable.Components.TitleLabel(title);
  var plot = new Plottable.Plots.Pie()
    .addDataset(new Plottable.Dataset(purity_data))
    .attr("fill", function(d) {
      return d.score;
    }, colorScale)
    .sectorValue(function(d) {
      return d.score;
    }, scale)
    .labelsEnabled(true);


  new Plottable.Components.Table([
    [titleLabel],
    [plot]
  ]).renderTo(targetElement);

}


function drawPieLegend(targetElement) {
  new Plottable.Components.Legend(colorScale)
    .renderTo(targetElement);
}


drawPieLegend('#pies-legend')

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />


</head>

<body>


  My Plot

  <!-- Show histograms -->
  <div id="sample-pies"></div>
  
  Legend here:
  <div id="pies-legend"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.js"></script>





</body>

</html>

我想做的是在'#pies-legend'下显示两个饼图的一个图例作为函数drawPieLegend()调用的目标元素。但是为什么没有出现呢？

Answer 1

您需要为新 Plottable.Components.Table() 添加图例。

new Plottable.Components.Table([
    [titleLabel],
    [plot],
    [legend]
  ]).renderTo(targetElement);

浏览下面的代码片段。

var indata = [{
  'sample': "Foo",
  "pies_pct": [{
    "score": 6.7530200000000002,
    "celltype": "Bcells"
  }, {
    "score": 11.432763461538459,
    "celltype": "DendriticCells"
  }]

}, {
  'sample': "Bar",
  "pies_pct": [{
    "score": 26.8530200000000002,
    "celltype": "Bcells"
  }, {
    "score": 31.432763461538459,
    "celltype": "BCells"
  }]

}, ];



processData(indata);

function processData(data) {

  pies = data.map(function(data) {
    return {
      title: data.sample,
      dataset: data.pies_pct
    };


  });

  buildPlots();
}

function buildPlots() {
  var $pieContainer = $('#sample-pies');

  pies.forEach(function(pie, index) {
    var elementId = "sample-pie-" + index;

    $(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
      .css({
        width: '200px',
        height: '200px',
        display: 'inline-block'
      })
      .attr('id', elementId)
      .appendTo($pieContainer);


    plotSamplePie(pie.title, pie.dataset, '#' + elementId);
  });


}




function plotSamplePie(title, purity_data, targetElement) {
  var scale = new Plottable.Scales.Linear();
  var tableau20 = ['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728',
    '#9467BD', '#8C564B', '#CFECF9', '#7F7F7F', '#BCBD22', '#17BECF'
  ];
  var colorScale = new Plottable.Scales.Color();
  var legend = new Plottable.Components.Legend(colorScale);
  colorScale.range(tableau20);




  var titleLabel = new Plottable.Components.TitleLabel(title);
  var plot = new Plottable.Plots.Pie()
    .addDataset(new Plottable.Dataset(purity_data))
    .attr("fill", function(d) {
      return d.score;
    }, colorScale)
    .sectorValue(function(d) {
      return d.score;
    }, scale)
    .labelsEnabled(true);


  new Plottable.Components.Table([
    [titleLabel],
    [plot],
    [legend]
  ]).renderTo(targetElement);

}


function drawPieLegend(targetElement) {
  new Plottable.Components.Legend(colorScale)
    .renderTo(targetElement);
}


drawPieLegend('#pies-legend')

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />


</head>

<body>


  My Plot

  <!-- Show histograms -->
  <div id="sample-pies"></div>
  
  Legend here:
  <div id="pies-legend"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.js"></script>





</body>

</html>

Answer 2

colorScale定义在plotSamplePie()内，所以不会出现在drawPieLegend()的范围内。在两个函数之外声明 colorScale 将使两个函数都可以访问它（尽管这有点混乱，因为它现在是一个全局变量）。在处理函数中创建 colorScale 可能会更清晰，然后将其传递给分别制作饼图和图例的函数。这是修复它的快速尝试：

var indata = [{
  'sample': "Foo",
  "pies_pct": [{
    "score": 6.7530200000000002,
    "celltype": "Bcells"
  }, {
    "score": 11.432763461538459,
    "celltype": "DendriticCells"
  }]

}, {
  'sample': "Bar",
  "pies_pct": [{
    "score": 26.8530200000000002,
    "celltype": "Bcells"
  }, {
    "score": 31.432763461538459,
    "celltype": "DendriticCells"
  }]

}, ];

              
var colorScale = new Plottable.Scales.Color();
var tableau20 = ['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728',
    '#9467BD', '#8C564B', '#CFECF9', '#7F7F7F', '#BCBD22', '#17BECF'
];
colorScale.range(tableau20);

processData(indata);

function processData(data) {

  pies = data.map(function(data) {
    return {
      title: data.sample,
      dataset: data.pies_pct
    };


  });

  buildPlots();
}

function buildPlots() {
  var $pieContainer = $('#sample-pies');

  pies.forEach(function(pie, index) {
    var elementId = "sample-pie-" + index;

    $(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
      .css({
        width: '200px',
        height: '200px',
        display: 'inline-block'
      })
      .attr('id', elementId)
      .appendTo($pieContainer);


    plotSamplePie(pie.title, pie.dataset, '#' + elementId);
  });


}




function plotSamplePie(title, purity_data, targetElement) {
  var scale = new Plottable.Scales.Linear();
  var titleLabel = new Plottable.Components.TitleLabel(title);
  var plot = new Plottable.Plots.Pie()
    .addDataset(new Plottable.Dataset(purity_data))
    .attr("fill", function(d) {
      return d.celltype;
    }, colorScale)
    .sectorValue(function(d) {
      return d.score;
    }, scale)
    .labelsEnabled(true);


  new Plottable.Components.Table([
    [titleLabel],
    [plot]
  ]).renderTo(targetElement);

}


function drawPieLegend(targetElement) {
  new Plottable.Components.Legend(colorScale)
    .maxEntriesPerRow(Infinity)
    .renderTo(targetElement);
}


drawPieLegend('#pies-legend');

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />


</head>

<body>


  My Plot

  <!-- Show histograms -->
  <div id="sample-pies"></div>
  
  Legend here:
  <svg id="pies-legend" height="50" width="400"></svg>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.js"></script>





</body>

</html>

另请注意

的变化

.attr("fill", function(d) {
  return d.score;
}, colorScale)

至

.attr("fill", function(d) {
  return d.celltype;
}, colorScale)

这导致颜色由 celltype 而不是 score 驱动。

如何在 Plottable.js 多图中显示图例

How to display a legend in Plottable.js multiple plot

html

javascript

d3.js

plottable