Question

我正在使用d3使用以这种方式格式化的数据数组显示水平条形图

data = [{ value: 167, key: 'myKey' }, ...]

为了测试我使用了6个元素的数组，其中最后4个元素具有相同的值。 d3只显示3个条形，因为最后四个元素的值相同，因此计为一个。我阅读了以下讨论Wrong usage of d3 scale with same values in data?，但我使用了相同的代码

y = d3.scale.ordinal()
        .domain(d3.range(data.length))     // data.length = 6
        .rangeRoundBands([0, height], .1);

为了显示条形码，我创建了一个g（组元素），并向其添加了rect和text元素。

<g class="bar-container" pointer-events="all" transform="translate(0,4)">
    <rect class="bar" x="0" y="0" width="380" height="30"></rect>
    <text pointer-events="none" x="5" y="18">key</text>
</g>

update-enter-exit模式的JS代码是

var barsGroup = svg.selectAll('g.bar-container')
    .data(data, function(d) { return d.value; });

var bar = barsGroup.enter()
    .append('g')
    .attr('class', 'bar-container')
    .attr('pointer-events', 'all')

bar.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; });

// Add rectangle and text
bar.append("rect") ...
bar.append('text') ...

图表中只有3个g个对象而不是6个。没有任何内容隐藏，因此我没有创建3个额外的栏。

Answer 1

我有点看到修复作为你答案本身的一部分。看看你在这里写的代码：

function(d, i) { return "translate(0," + y(i) + ")"; }

将索引传递给比例的原因是因为它必须是唯一的，否则序数比例将重复值视为相同。然而，这是你错过的：

var barsGroup = svg.selectAll('g.bar-container')
.data(data, function(d) { return d.value; });

此处您的收藏集按值分组。因此，重复的值被认为是相同的，并且从未添加到您期望的连接中。所以barsGroup现在只包含3个值，因此剩下的代码也可以相应地工作。

现在要解决此问题，您应该为数据添加一个唯一字段。如果您不想这样做，也可以在这里使用索引？我没有看到你使用＆＃39; value＆＃39;直接在某处，所以可能会没问题：

var barsGroup = svg.selectAll('g.bar-container')
.data(data, function(d,i) { return d.i; });

如果此解决方案错误或无效，请纠正我。我是新手，也希望这会有所帮助。

d3不显示重复数据的条形图

1 个答案: