Question

这个example显示了如何使用fake group和chart.elasticX（true）方法创建一个弹性X轴来移除空箱。

我试图用叠加的条形图来完成这项工作，但我遇到了问题。我稍微修改了上面示例的代码，以便为条形图使用堆叠组。（我在数据中添加了一个Earned列，为它创建了一个假组并将其分配给chart.stack方法）。但对于某些＆＃34;获得＆＃34;值有一个d3.js错误：

未捕获的TypeError：无法读取属性＆＃39; 1＆＃39;未定义的。

＃

更新：此问题与此answer有关，其中指出＆＃34;堆栈方法希望您的数据具有相同的长度和＃34;。它也与此answer有关，它建议创建一个组合小组来克服这个问题。

＃

以下是修改后的示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js - Filtering Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0/dc.min.css"/>
</head>
<body>

<div class="container">
<script type="text/javascript" src="header.js"></script>
  <p>Example demonstrating using a "<a href="https://github.com/dc-js/dc.js/wiki/FAQ#fake-groups">Fake Group</a>" to remove
    the empty bars of an ordinal bar chart when their values drop to zero.</p>

  <p>(Note the use of <code><a href="https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.coordinateGridMixin+elasticX">.elasticX(true)</a></code>
    to force calculation of the X domain each round.)</p>

<div id="chart-ring-year"></div>
<div id="chart-hist-spend"></div>
<div id="chart-row-spenders"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0/dc.min.js"></script>
<script type="text/javascript">
var yearRingChart   = dc.pieChart("#chart-ring-year"),
    spendHistChart  = dc.barChart("#chart-hist-spend"),
    spenderRowChart = dc.rowChart("#chart-row-spenders");
// use static or load via d3.csv("spendData.csv", function(error, spendData) {/* do stuff */});
var spendData = [
    {Name: 'Mr A', Spent: '$40', Earned: '$70', Year: 2011},
    {Name: 'Mr B', Spent: '$10', Earned: '$20', Year: 2011},
    {Name: 'Mr C', Spent: '$40', Earned: '$40', Year: 2011},
    {Name: 'Mr A', Spent: '$70', Earned: '$170', Year: 2012},
    {Name: 'Mr B', Spent: '$20', Earned: '$30', Year: 2012},
    {Name: 'Mr B', Spent: '$50', Earned: '$30', Year: 2013},
    {Name: 'Mr C', Spent: '$30', Earned: '$70', Year: 2013}
];
// normalize/parse data
spendData.forEach(function(d) {
    d.Spent = d.Spent.match(/\d+/);
    d.Earned = d.Earned.match(/\d+/);
});
function remove_empty_bins(source_group) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return d.value != 0;
            });
        }
    };
}
// set crossfilter
var ndx = crossfilter(spendData),
    yearDim  = ndx.dimension(function(d) {return +d.Year;}),
    spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),
    earnDim = ndx.dimension(function(d) {return Math.floor(d.Earned/10);}),
    nameDim  = ndx.dimension(function(d) {return d.Name;}),
    spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),
    spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),
    spendHist    = spendDim.group().reduceCount(),
    earnHist    = earnDim.group().reduceCount(),
    nonEmptyHist = remove_empty_bins(spendHist)
    nonEmptyEarnHist = remove_empty_bins(earnHist)

yearRingChart
    .width(200).height(200)
    .dimension(yearDim)
    .group(spendPerYear)
    .innerRadius(50);

spendHistChart
    .width(300).height(200)
    .dimension(spendDim)
    .group(nonEmptyHist)
    .stack(nonEmptyEarnHist)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .elasticX(true)
    .elasticY(true);
spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unit
spendHistChart.yAxis().ticks(2);

spenderRowChart
    .width(350).height(200)
    .dimension(nameDim)
    .group(spendPerName)
    .elasticX(true);

dc.renderAll();
</script>

</div>
</body>
</html>

但是，如果将“已获奖”值更改为

var spendData = [
        {Name: 'Mr A', Spent: '$40', Earned: '$70', Year: 2011},
        {Name: 'Mr B', Spent: '$10', Earned: '$20', Year: 2011},
        {Name: 'Mr C', Spent: '$40', Earned: '$40', Year: 2011},
        {Name: 'Mr A', Spent: '$70', Earned: '$170', Year: 2012},
        {Name: 'Mr B', Spent: '$20', Earned: '$30', Year: 2012},
        {Name: 'Mr B', Spent: '$50', Earned: '$50', Year: 2013},  // This is the only change Earned from '$30' to '$50'
        {Name: 'Mr C', Spent: '$30', Earned: '$70', Year: 2013}
    ]

然后它工作正常。

我的情况遇到了同样的d3错误，所以我尝试用一个简单的例子重现它。

还有this相关问题

Answer 1

Welp，you found the answer already;它只是应用它的问题。

这确实是可以通过组合小组解决的相同问题。

combinedGroup = combine_groups(nonEmptyHist,nonEmptyEarnHist)

function sel_stack(i) {
    return function(d) {
        return d.value[i];
    };
}

spendHistChart
    .group(combinedGroup, 'spend', sel_stack(0))
    .stack(combinedGroup, 'earn', sel_stack(1))

我不知道另一种处理这个问题的方法; d3.stack需要相同大小的数组，dc.js也会假设键/值数组彼此对应。

小提琴：http://jsfiddle.net/gordonwoodhull/dwkgud92/3/

用于堆叠条形图的弹性X轴，移除空箱[dc.js]

＃

＃

1 个答案: