javascript - D3 + typescript 代码可为火箭发射平铺多个图

我需要一些帮助来创建类似于我在下图中绘制的图。我有火箭发射的一秒数据，我想在这种情节中查看数据...


左侧的y轴分别显示时间和高度
绘制每个变量。 y（x）“作为时间/高度的函数而变化”
最后，我希望能够绘制多个发射图，以便我可以
    比较它们（蓝色是启动1，绿色是启动2）


**编辑：在比较不同发射的地块上，不显示时间，仅显示高度。在只有一次发射的地块上显示时间和高度。

这是我尝试的密码笔
https://codesandbox.io/s/eager-night-qo88q?fontsize=14&hidenavigation=1&theme=dark

为该图提供数据，您可以使用像这样的随机数据

const now = new Date();
const data = Array(100).fill('').map((_,i) => ({
  time: new Date(now.getTime() + i*1000),
  height: i,
  velocity: Math.floor(Math.random() * 300),
  acceleration: Math.floor(Math.random() * 100),
  fuel: Math.floor(Math.random()*100)/100
}));

最佳答案

要绘制线条，您将需要在svg上附加路径。为此，我们替换：

    var line = d3
        .line()
        .x((d: any) => x(d[key]))
        .y((d: any) => x(d[yAxisVariable]));

与

// to plot the lines
 svg
    .datum(data)
    .append("path")
    .attr("class", "dataline")
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 1)
    .attr("d", d3.line()
        .x(function(d) {
            return x(d[`${key}`]) ;
        })
        .y(function(d) {
            return y(d.height) ;
        })
        )

另外，我们需要将此移动到

    svg2.append('g').call(d3.axisBottom(x));

以便在绘制svg和网格后追加。

现在，在您的应用程序中，当我执行此操作时，如果将console.log用作路径，它将生成该行。但是，由于某种原因，有一个类附加到该路径上，这使得它消失了（笔划宽度：0）。我不知道该如何改写。我试图将笔划宽度作为属性来提及，但似乎没有任何作用。

.makeStyles-trace-949 path {
    stroke-width: 0;
}

上一类中的数字949一直在变化，我不知道您的代码的来源。
在浏览器控制台中，如果禁用该类，则可以看到该行。

这是控制台的屏幕截图



这是codesandbox。

这是您禁用该CSS类后的屏幕截图：



我还没有研究过为什么线会偏离图表，但我怀疑这与x轴的边距和域范围映射有关。

当前，由于所有数据汇总在一起，因此发射A图和发射B图都在一起。这就是为什么您看到一条线穿过了，因为启动A的所有点都完成了，它将启动A的最后一点连接到启动B的第一点。您可以考虑嵌套您的发射数据，然后分别绘制线对于每个嵌套数据。在nesting and grouping data上查阅本指南。

我希望这有帮助。

关于javascript - D3 + typescript 代码可为火箭发射平铺多个图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59185621/