'Invalid value for <path>' 在 Plottable/D3.js 下制作饼图时出错

Question

我有三部分代码（HTML 和 JavaScript）。可以下载 here:

index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- Later add new CSS to define the placement of the legend, fold change etc -->
</head>




<body>


    <!-- Show pies -->
    <div id="sample-pies"></div>


    <!-- Act on the thing -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js" ></script>

    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>

    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
    <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.12.0/plottable.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>

    <script src="pie_app.js"></script>
    <script src="pie.js"></script>

</body>
</html>

pie_app.js

jQuery(

   function ($) {
    "use strict";

    var pies;

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

                ]

    },
    { 'sample' : "Bar",
      "pies_pct":[
                        {
                            "score": 5.1335499999999996,
                            "celltype": "Bcells"
                        },
                        {
                            "score": 85.1618225,
                            "celltype": "DendriticCells"
                        }

      ]

    }
 ];


       processData(indata);

       function processData(data) {
            pies = data.map(function (data) {
            var pct_vals = data.pies_pct;

            return {
                title: data.sample,
                dataset: pct_vals
            };
        });





        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);
        });

    }

}


);

pie.js

(

 function (window) {
    "use strict";
    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);


    function plotSamplePie(title,purity_data,targetElement) {

        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);
    }


    window.plotSamplePie = plotSamplePie;

}
)(this);

我得到的 Chrome 中的错误信息是这样的：

看到饼图 Bar 呈现错误（全部为绿色）。

只有当我像上面那样将运行作为 3 部分代码时才会发生错误。我该如何解决？

我期待的剧情可以在这里显示。所以请注意，它在这里起作用。但没有执行像上面的 3 部分代码。

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 indata2 = [
        { 'sample' : "Foo",
            "pies_pct":[
                        {
                            "score": 6.7530200000000002,
                            "celltype": "Bcells"
                        },
                        {
                            "score": 11.432763461538459,
                            "celltype": "DendriticCells"
                        },

                ]

    },
    { 'sample' : "Bar",
      "pies_pct":[
                        {
                            "score": 5.1335499999999996,
                            "celltype": "Bcells"
                        },
                        {
                            "score": 85.1618225,
                            "celltype": "Monocytes"
                        }

      ]

    }
 ];


processData(indata2);

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);

}

<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>
  
 

  <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 1

您似乎将 scale 传递给 sectorValue()，但这不是必需的。将调用更改为

.sectorValue(function(d) { return d.score; })

给我这个：

希望对您有所帮助！

P.S。您可以通过在 Pie.

上设置 labelFormatter() 稍微清理标签

'Invalid value for <path>' 在 Plottable/D3.js 下制作饼图时出错

'Invalid value for <path>' error while making pie chart under Plottable/D3.js

html

javascript

jquery

d3.js

plottable