Question

使用dc.js库绘制图表，我需要使用 .valueAccessor（）在饼图中使用 .cap（）方法。

相同的图表：

没有.cap（）：在.valueAccessor（）
使用.cap（）：在js控制台中绘制图表时没有错误，但它没有显示正确的结果，它似乎按值排序，而不是由valueAccessor排序

这是一个更好解释的例子：

＆＃13;

var chartProblems = dc.pieChart('#chart');
var chartProblems1 = dc.pieChart('#chart1');



var data = [{
  Ticket: 0,
  Problem: 'zzz'
}, {
  Ticket: 1,
  Problem: 'zzz'
}, {
  Ticket: 1,
  Problem: 'bb'
}, {
  Ticket: 1,
  Problem: 'cc'
}, {
  Ticket: 2,
  Problem: 'zzz'
}, {
  Ticket: 3,
  Problem: 'bb'
}, {
  Ticket: 3,
  Problem: 'zzz'
}, {
  Ticket: 4,
  Problem: 'zzz'
}, {
  Ticket: 5,
  Problem: 'zzz'
}, {
  Ticket: 6,
  Problem: 'zzz'
}, {
  Ticket: 6,
  Problem: 'bb'
}, {
  Ticket: 7,
  Problem: 'bb'
}, {
  Ticket: 8,
  Problem: 'dd'
}, {
  Ticket: 9,
  Problem: 'ee'
}, {
  Ticket: 9,
  Problem: 'ff'
}, {
  Ticket: 10,
  Problem: 'cc'
}, ];

var ndx = crossfilter(data);
ProblemsDimension = ndx.dimension(function(b) {
  return b.Problem
});
ProblemGroup = ProblemsDimension.group()
  .reduce(
    function(p, d) {

      if (d.Ticket in p.Ticket) p.Ticket[d.Ticket] ++;
      else {
        p.Ticket[d.Ticket] = 1;
        p.TicketCount++;
      }
      return p;
    },

    function(p, d) {
      p.Ticket[d.Ticket] --;
      if (p.Ticket[d.Ticket] === 0) {
        delete p.Ticket[d.Ticket];
        p.TicketCount--;
      }
      return p;
    },

    function() {
      return {
        TicketCount: 0,
        Ticket: {}
      };
    }
  );


chartProblems
  .width(300)
  .height(300)
  //.margins({ top: 20, left: 10, right: 10, bottom: 20 })
  .dimension(ProblemsDimension)

.group(ProblemGroup)

.colors(d3.scale.category20())
  // assign colors to each value in the x scale domain
  //.ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
  .label(function(d) {
    return d.key + ': ' + d.value.TicketCount;
  })
  // title sets the row text
  .title(function(d) {
    return d.key + ': ' + d.value.TicketCount;
  })

//.elasticX(true)
//.xAxis().ticks(4)
;
chartProblems
  .valueAccessor(function(d) {
    return d.value.TicketCount;
  })
  .ordering(function(b) {
    return -b.value.TicketCount
  })
  .cap(2);
chartProblems.render();

chartProblems1
  .width(300)
  .height(300)
  //.margins({ top: 20, left: 10, right: 10, bottom: 20 })
  .dimension(ProblemsDimension)

.group(ProblemGroup)

.colors(d3.scale.category20())
  // assign colors to each value in the x scale domain
  //.ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
  .label(function(d) {
    return d.key + ': ' + d.value.TicketCount;
  })
  // title sets the row text
  .title(function(d) {
    return d.key + ': ' + d.value.TicketCount;
  })

//.elasticX(true)
//.xAxis().ticks(4)
;
chartProblems1
  .valueAccessor(function(d) {
    return d.value.TicketCount;
  })
  .ordering(function(b) {
    return -b.value.TicketCount
  })
  //.cap(2)
;
chartProblems1.render();

＆＃13;

<script src="http://tvinci.github.io/webs/js/d3.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" rel="stylesheet" />
<script src="http://tvinci.github.io/webs/js/crossfilter.js"></script>
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>

<body>
  <table>
    <tr>
      <td>With cap
        <br/>
        <div id="chart"></div>
      </td>
      <td>Same chart without cap
        <br/>
        <div id="chart1"></div>
      </td>
    </tr>
  </table>
</body>

＆＃13;

此处：http://jsfiddle.net/atagliavini/LypsLtot /

我该如何解决这个问题？我忘记了什么吗？

Answer 1

我希望我能解决你的问题。我将.cap( )替换为.data( )，并根据 TicketCount 对数据进行排序，并对要渲染的数据进行预过滤。现在，您只能获得.data( )中提到的那些 top（n）键值对。修改后的代码：

.data(function (ProblemGroup) {
return ProblemGroup.order(function(p) {
    return p.TicketCount;
}).top(2);
})

这是具有指定字符的your Fiddle。

。数据（[回调]）

设置数据回调或检索图表的数据集。数据   回调传递给图表组，默认情况下将返回   群组。（）。例如，可以将此行为修改为返回   只有前5个组：
chart.data(function(group) {
    return group.top(5);
});

Answer 2

我知道它有点晚了但是我在这里解决了这个问题。我创建了图表的自定义othersGrouper和cappedValueAccessor函数.Below是相同的代码。< / p>

chartProblems.othersGrouper(function (topItems, restItems) {
            var restItemsSum = d3.sum(restItems, chartProblems.valueAccessor()),
                restKeys = restItems.map(chartProblems.keyAccessor());
            if (restItemsSum > 0) {
                topItems = topItems.concat([{
                    others: restKeys,
                    key: chartProblems.othersLabel(),
                    // value:restItemsSum,
                    value: {
                        TicketCount: restItemsSum

                    }
                }]);
            }
            return topItems;
        });     
chartProblems.cappedValueAccessor = function (d, i) {
            if (d.others) {
                return d.value.TicketCount;
            }
            return chartProblems.valueAccessor()(d, i);
        };

由于您已将组缩小为返回自定义对象，因此必须修改othersgrouper和cappedvalueAccessor函数才能使用饼图的cap功能。 Here是上面使用的小提琴的更新链接。

dc.js - 如何使用带有.valueAccessor（）的.cap（）？

2 个答案: