Javascript 如何使用D3.js生成控制图？

我需要一个解决方案来表示D3.js中的以下数据

理想情况下，图表应类似于下面的示例

基于以下

数据集

，我需要为我当前正在使用的Javascript应用程序生成一个

控制图

。我知道有很多图表类型，但找不到最适合数据的。一些示例代码会很好

Json格式的数据集

{
"results": [
{
    "individualValues": 
    {
        "usl": 57.84,
        "nom": 47.7,
        "lsl": 37.56,
        "readings": [
        {
            "date": "2017-01-01T00:00:00.000Z",
            "value": 46.09
        },
        {
            "date": "2017-01-01T01:00:00.000Z",
            "value": 49.12
        },
        {
            "date": "2017-01-01T02:00:00.000Z",
            "value": 51.67
        },
        {
            "date": "2017-01-01T02:00:00.000Z",
            "value": 45.67
        }]
    }       
},

{
    "movingRangeValues": 
    {
        "usl": 12.46,
        "nom": 3.81,
        "lsl": 0,
        "readings": [
        {
            "date": "2017-01-01T00:00:00.000Z",
            "value": 3.09
        },
        {
            "date": "2017-01-01T01:00:00.000Z",
            "value": 1.12
        },
        {
            "date": "2017-01-01T02:00:00.000Z",
            "value": 7.67
        },
        {
            "date": "2017-01-01T02:00:00.000Z",
            "value": 1.67
        }]
    }       
}]

}

---

预期结果应如下所示：。

您是否可以解释一下，除了用于最终结果的图表外，这个问题与我之前提出的现有问题是如何完全重复的？这个问题和最后一个问题都与主题无关，因为您没有代码，正在寻找教程(“如何做”）。这个问题和最后一个问题的区别在于，你在这个问题中添加了数据，这不是一个实质性的区别。也就是说，你应该编辑最后一个问题，而不是这个问题。但是，S.O.是一个民主制度：到目前为止，我可以看到两张重新开放的选票。@GerardoFurtado在上一个问题中，我要求推荐我建议使用

图表库

，我认为这违反了SO规则。在当前的问题中，我要求使用d3.js解决给定的问题。这两个问题看起来如何相同？当你在问题中添加d3标记时，你问的是如何使用d3。这是相同的事情。但这是你想要的：I r我提出了这个问题。祝你好运。@GerardoFurtado这不是一个重复的问题。另一个问题是推荐一个库，这个问题是问如何使用一个特定的库来做一些事情。由于同样的原因，你觉得这一个是离题的，所以最好出于同样的原因关闭它，而不是将它标记为重复。Bey此外，我认为这个问题是有效的，如果有点懒惰的话，因为询问如何做某事是问题的核心，并且将其缩小到使用JavaScript和D3提供了有价值的上下文，使问题更容易理解和回答。你能解释一下这个问题是如何与现有问题完全相同的吗我之前问过，除了图表之外，其他的都是用于最终结果的？这个问题和最后一个问题都是离题的，因为你没有代码，正在寻找教程（“如何做”）。这个问题和最后一个问题的区别在于，你在这个问题中添加了数据，这不是一个实质性的区别。也就是说，你应该编辑最后一个问题，而不是这个问题。但是，S.O.是一个民主制度：到目前为止，我可以看到两张重新开放的选票。@GerardoFurtado在上一个问题中，我要求推荐我建议使用

图表库

，我认为这违反了SO规则。在当前的问题中，我要求使用d3.js解决给定的问题。这两个问题看起来如何相同？当你在问题中添加d3标记时，你问的是如何使用d3。这是相同的事情。但这是你想要的：I r我提出了这个问题。祝你好运。@GerardoFurtado这不是一个重复的问题。另一个问题是推荐一个库，这个问题是问如何使用一个特定的库来做一些事情。由于同样的原因，你觉得这一个是离题的，所以最好出于同样的原因关闭它，而不是将它标记为重复。Bey此外，我认为这个问题是有效的，如果有点懒惰的话，因为询问如何做某事是问题的核心，并且将其缩小到使用JavaScript和D3提供了有价值的上下文，使问题更容易理解和回答。