时间戳

首页 > 解决方案 > 如何从 d3 日历视图中的数据动态设置日期？

d3.js - 如何从 d3 日历视图中的数据动态设置日期？

问题描述

在 d3日历视图示例中，我试图对其进行修改，以根据给定的数据自动确定要显示的年份范围。

是否可以让 d3 自动找出传递给 d3.range() 的参数以自动确定开始和结束年份，而不是使用硬编码的文字？

在下面的 .data() 行中，我尝试使用 d3.min() 和 d3.max() 作为 d3.range() 的参数，但这是不正确的。我已经尝试预先对嵌套数据进行排序以获得数组中的第一个和最后一个条目，但这没有奏效。建议？

    return d3.select( "body" )
             .selectAll( "svg" )
             .data(d3.range(1990, 2010))
             .enter()
             .append( "svg" )
             .attr( "width", width )
             .attr( "height", height )
             .attr( "class", "year" )
             .append( "g" )
             .attr( "transform", "translate(" + getOffsetX() + "," + getOffsetY() + ")" );

标签： d3.js

解决方案

将完成的所有内容d3.csv("dji.csv",放在回调之前和之后d3.nest()，修改以下行

var range = d3.extent(csv, d => Number(d.Date.substring(0,4)));
var svg = d3.select("body")
  .selectAll("svg")
  .data(d3.range(range[0], range[1]))
  .enter().append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");

推荐阅读