访问嵌套数据而不附加 d3.js

Question

我很难理解嵌套选择的工作原理。我寻找了类似的问题，但 none 考虑一个案例，您 访问嵌套数据只是为了设置属性 ，而不附加任何内容。

我想在水平条形图中显示每年陨石着陆的数量：每年一个矩形，宽度等于当年坠落的陨石数量。

这是数据格式（csv）：

name,id,nametype,recclass,rectype,mass,fall,year,reclat,reclong,GeoLocation
Renazzo,22586,Valid,CR2,Stony,1000,Fell,1824,44.76667,11.28333,"(44.76667, 11.28333)"
Tounkin,24037,Valid,OC,Stony,2000,Fell,1824,51.73333,102.53333,"(51.73333, 102.53333)"
Zebrak,30397,Valid,H5,Stony,2000,Fell,1824,49.88333,13.91667,"(49.88333, 13.91667)"

在这种情况下，例如，我应该得到一个长度为 3 的柱。

首先，我通过嵌套按年份对数据进行分组：

var dataByYear = d3.nest()
    .key(function(d) {
        return d.year;
    })
    .entries(data);

我不使用汇总，因为我需要保留这些值并在以后访问它们（我需要名称、名称类型、年份和质量）。

生成的数组如下所示：

然后我画矩形：

barSvg.selectAll("rect")
    .data(dataByYear).enter().append("rect")
    .attr("x", 10)
    .attr("y", function(d, i) {
        return i * 23;
    })
    .attr("height", 10)
    .selectAll("rect")
    .data(function(d, i) {
        return d;
    }).enter()
    .attr("width", function(d) {
        return d.year.lenght;
    });

控制台不显示错误消息，绘制了所有矩形，但不显示其高度属性。

有人可以告诉我我在这里缺少什么吗？

Answer 1

首先，在 "enter" 选择中再次使用 data() 和 enter() 是没有意义的。摆脱那个。

在您的输入选择中，每个数据都有一个 key 属性和一个 values 属性。获取当年坠落陨石数量的方法很简单，就是用values.length.

这是一个使用您的数据的演示（将呈现单个矩形）：

var csv = `name,id,nametype,recclass,rectype,mass,fall,year,reclat,reclong,GeoLocation
Renazzo,22586,Valid,CR2,Stony,1000,Fell,1824,44.76667,11.28333,"(44.76667, 11.28333)"
Tounkin,24037,Valid,OC,Stony,2000,Fell,1824,51.73333,102.53333,"(51.73333, 102.53333)"
Zebrak,30397,Valid,H5,Stony,2000,Fell,1824,49.88333,13.91667,"(49.88333, 13.91667)"`;

var svg = d3.select("svg");

var data = d3.csvParse(csv);
var dataByYear = d3.nest()
  .key(function(d) {
    return d.year;
  })
  .entries(data);

var rects = svg.selectAll(null)
  .data(dataByYear)
  .enter()
  .append("rect")
  .attr("x", 10)
  .attr("y", function(d, i) {
    return i * 23;
  })
  .attr("height", 10)
  .attr("width", function(d) {
    return d.values.length * 10
  })

<script src="https://d3js.org/d3.v4.js"></script>
<svg></svg>

访问嵌套数据而不附加 d3.js

Access nested data without appending in d3.js

arrays

nested

selection

hierarchical-data

d3.js