d3 不显示具有重复数据的条形

Question

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

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

为了测试，我使用了一个包含 6 个元素的数组，其中最后 4 个元素具有相同的值。 d3 只显示 3 个柱，因为最后四个元素的值相同，因此计为 1。 我阅读了以下讨论 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; });

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

现在要解决此问题，您可能应该在数据中添加一个唯一字段。如果您不想这样做，也可以在这里使用 index 吗？我没有看到您直接在某处使用“值”的值，所以这可能会很好：

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

如果此解决方案有误或不起作用，请纠正我。我也是新手，希望对您有所帮助。