Question

所以我开始使用d3 treemap，当然它很棒问题是 - 我的一些数据具有非常大的尺寸，并且有一些非常小的尺寸（即{ name: 'j', size: 5000} , { name: 'x', size: 15}等...）因此，结果可视化当然显示了几个非常大的细胞和一些非常小的细胞在小单元格上，文本根本不可见，因此它们不是很有用。

我想知道是否可以选择将所有小值单元格聚合到其他人中。细胞？

Answer 1

不，没有选择自动执行此操作。您必须手动进行聚合。代码可能看起来像这样。

var bigEnough = data.filter(function(d) { return d.size >= threshold; }),
    tooSmall = data.filter(function(d) { return d.size < threshold; }),
    nodes = bigEnough.push({name: 'other',
                            size: d3.sum(tooSmall, function(d) { return d.size; })
                          });

Answer 2

您还可以选择在将值提供给树形图函数时缩放值，无论您认为合适的程度如何。它会使最小值的感知变形，但它有助于保持一切可见。我首先看一下你的最大值和最小值并测量一个好的平均值。您可以尝试linear或log比例。

var dataScale = d3.scale.linear()
    .domain([d3.min(data, function(d){return d.size}),
         d3.max(data, function(d){return d.size})]);



dataScale.range([0,100]); //here you can choose a hard coded amount, 
                   //or quartiles of your data to fit your needs

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { return dataScale(d.size); });

树图聚合值太小而无法正确显示

2 个答案: