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

Question

我很难理解嵌套选择的工作原理。我查找了类似的问题，但没有人考虑你访问嵌套数据只是为了设置属性，而不附加任何内容。

我希望在水平条形图中可视化陨石登陆次数： 每年一个矩形，宽度等于当年陨石数量。

这是数据格式（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

首先，在＆＃34;中再次使用class SpritePosition { public: enum Direction { Left, Right, Up, Down }; SpritePosition(int x, int y) : _x(x), _y(y) {} void update(Direction d, float elapsedTime) { _d = d; switch(d) { case Left: _x -= _tileSize * elapsedTime; break; case Right: _x += _tileSize * elapsedTime; break; case Up: _y -= _tileSize * elapsedTime; break; case Down: _y -= _tileSize * elapsedTime; break; } } void update(float elapsedTime) { if((_x % _tileSize) == 0 && (_y % _tileSize) == 0) return; int step = _tileSize * elapsedTime; if(_d == Left) { int d = _x % _tileSize; if(step > d) _x -= d; else _x -= step; } else if(_d == Right) { int d = tileSize - (_x % _tileSize); if(step > d) _x += d; else _x += step; } else // same for Up and Down } int getX() const { return _x;} int getY() const { return _y;} int getTileX() const { return _x / _tileSize;} int getTileY() const { return _y / _tileSize;} private: const int _tileSize = 32; int _x; int _y; Direction _d; }; 和data()输入＆＃34;选择毫无意义。摆脱它。

在您的回车选择中，每个数据都有enter()属性和key属性。在那一年获得陨石数量的方法就是使用values。

这是一个包含数据的演示（将渲染一个矩形）：

＆＃13;

＆＃13;

values.length

＆＃13;

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
  })

＆＃13;

＆＃13;

＆＃13;