Html js热图：如何读取嵌套的json并使用D3创建热图

几天来，我一直在尝试读取包含数据的JSON文件，并从中生成热图。JSON包含git每天提交的频率，每周提交52周。JSON中的数据（每天提交的频率）是嵌套的，因此我不知道如何提取数据并获取表示数据的代码。我真的是一个新手，我不明白我错过了什么或做错了什么。如果有人能帮我，我将不胜感激。我读了几个链接，但没有一个涉及JSON，我也很难理解它。我想创建52行代表一周，7列代表一周中的每一天，我已经有了。矩形不能反映频率。我不知道该怎么做。到目前为止，我所拥有的数据和代码示例如下：

代码：

---

我在文件中有52个这样的JSON对象。

您的代码使用这段代码将值附加到RECT，特别是

.data（函数（d）{return d.days}）

每个附加的rect将具有来自days数组的一个值（例如0或1）

您可以在浏览器控制台中对此进行检查（右键单击rect，选择inspect并转到Properties>rect>data，您将看到该元素附加了哪些值

从那里，您通常可以使用设置rect的样式或属性中的匿名函数访问该值。例如，要设置颜色：

.style（“填充”，函数（d）{返回d==0？“灰色”：“黑色”}）

---

它将值为0的矩形设置为灰色，其他任何颜色都设置为黑色。尽管您得到了更复杂的映射，但使用d3比例将变得很有价值。

您的代码使用这段代码将值附加到矩形，特别是

.data（函数（d）{return d.days}）

每个附加的rect将具有来自days数组的一个值（例如0或1）

您可以在浏览器控制台中对此进行检查（右键单击rect，选择inspect并转到Properties>rect>data，您将看到该元素附加了哪些值

从那里，您通常可以使用设置rect的样式或属性中的匿名函数访问该值。例如，要设置颜色：

.style（“填充”，函数（d）{返回d==0？“灰色”：“黑色”}）

---

它将值为0的矩形设置为灰色，而其他任何颜色都设置为黑色。虽然你得到了更复杂的映射，但使用d3比例会变得很有价值。

这不就是这个吗？这只会帮助我创建网格。我在我的帖子中已经提到过，我可以实现它。因为我是d3新手，我真的不知道如何将值附加到t上矩形。我曾尝试将示例在线应用到我的代码中，但之后我的页面变为空白。这不是与此相同吗？这只是帮助我创建网格。我已经在我的帖子中提到过，我可以实现它。因为我是d3新手，我真的不知道如何将值附加到矩形。我尝试应用在线输入我的代码，但之后我的页面变成空白。

    <script type='text/javascript' src='http://d3js.org/d3.v4.min.js'></script>
    <script>
        var url = "data/git-commit-frequency.json"
        var color = ["#ffffd9","#c7e9b4","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]

        d3.json(url, function (data) {
            let gridSize = 50;
            let width = (gridSize + 1) * 7; 
            let height = (gridSize + 1) * data.length;

            // define range!!!
            var x = d3.scaleLinear()
            .domain([0, 7])
            .range([0, width]);

            //52 weeks
            var y = d3.scaleLinear()
            .domain([0, data.length])
            .rangeRound([height, 0]);

           let svg = d3.select("body").append("svg")
           .attr("width", width)
           .attr("height", height)

            // Generate rows for each json object
            var rows = svg.selectAll('.row')
            .data(data)
            .enter()
            .append('g')
            .attr("transform", function(d, i){ 
                 return "translate(0," + y(i) + ")"
            })

            // Generate rects for the array of days per object
            let box = rows.selectAll("rect")
             .data(function(d){ return d.days })
                 .enter()
                 .append("rect")
                .attr("x", function(d, i) { return x(i); }) 
                .attr("width", gridSize)
                .attr("height", gridSize)
                .style("fill", 'black')
                .attr("class", "bordered");
            })
    </script>
</body>

    [
      {
        "days": [
          0,
          0,
          0,
          0,
          0,
          1,
          0
        ],
        "total": 1,
        "week": 1457827200
       }
     ]

let box = rows.selectAll("rect")
             .data(function(d){ return d.days })
                 .enter()
                 .append("rect")
                .attr("x", function(d, i) { return x(i); }) 
                .attr("width", gridSize)
                .attr("height", gridSize)
                .style("fill", 'black')
                .attr("class", "bordered");
            })