Question

我有14个系列的线。我想用它们之间的间距来显示它们。像图像中的东西，我认为最好的选择是使用translate属性。我不知道如何用每一行做到这一点。我试图让我的数据在0到100之间

http://plnkr.co/edit/qmkxYEJYpIkXUQUMQMDa?p=preview

 paths.attr('transform', null)
        .transition()
        .duration(duration)
        .ease('linear')
        .attr('transform', 'translate(' + x(now - (limit - 1) * duration) + ')')
        .each('end', tick)

Answer 1

使用比例带（或带有rangeBand的v3序数比例）来平移线条，使用比例线性来绘制线条

http://plnkr.co/edit/qs1i4sVzBXl6de7b8HJ3?p=preview

 var band = d3.scale.ordinal()
            .domain(ids)
            .rangeBands([height, 0])

和

for (var name in groups) {
            var group = groups[name];
            let g = paths.append("g")
              .attr("transform", function(d,i){
                return "translate(0, " + band(name) +")";
              });
            group.path = g.append('path')
                .data([group.data])
                .attr('class', name + ' group')
                .style('stroke', group.color)
        }

Answer 2

你现在的问题是可怕的for...in循环。不要使用循环在D3代码中追加元素。这不仅是不必要的，而且还会使事情变得非常困难，就像你现在的情况一样。

因此，既然你有那个循环（我不会重构代码来消除它，那对于a - free - S.O.答案来说太简单了），这是我的解决方案：

首先，增加图表的高度并减小y比例的范围。在这里，我将高度设置为800，范围设置为[45, 0]。相应地改变（或者，如果你想避免幻数 - 总是一个好主意 - 看看other answer）

然后，在for循环中，根据一个名为index的计数器翻译每个元素：

var index = 0;

for (var name in groups) {
    var group = groups[name]
    group.path = paths.append('path')
        .data([group.data])
        .attr('class', name + ' group')
        .style('stroke', group.color)
        .attr("transform", function() {
            return "translate(0," + (55 * index++) + ")";
        })
}

这是您对这些更改的抨击：http://plnkr.co/edit/NPhWMpcorXhAubwytmOe?p=preview

如何在y轴上展开路径？

2 个答案: