Question

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

是否有可能让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() + ")" );

Answer 1

将在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) + ")");

如何从D3日历视图中的数据动态设置日期？

1 个答案: