【问题标题】：Combining Parent and Nested Data with d3.js使用 d3.js 结合父数据和嵌套数据
【发布时间】：2012-10-25 20:15:57
【问题描述】：

我有一个这样的数据结构（假设该数据结构是不可协商的）：

data = {
    segments : [
        {x : 20, size : 10, colors : ['#ff0000','#00ff00']},
        {x : 40, size : 20, colors : ['#0000ff','#000000']}
    ]};

使用d3.js javascript 库，我想绘制四个矩形，一个用于colors 数组中的每种颜色。来自segments 数组中每个条目的信息用于绘制对应于其color 数组中每种颜色的矩形。例如，红色和绿色矩形的宽度和高度均为 10。生成的 html 应如下所示：

<div id="container">
    <svg width="200" height="200">
        <g>
            <rect x="20" y="20" width="10" height="10" fill="#ff0000"></rect>
            <rect x="30" y="30" width="10" height="10" fill="#00ff00"></rect>
        </g>
        <g>
            <rect x="40" y="40" width="20" height="20" fill="#0000ff"></rect>
            <rect x="60" y="60" width="20" height="20" fill="#000000"></rect>
        </g>
    </svg>
</div>

我已经想出了一些代码来实现这一点，但我发现在data 中使用来自两个不同嵌套级别的数据的部分令人困惑，我觉得可能有一种更惯用的方式来完成d3.js 也是如此。这是代码（完整示例在http://jsbin.com/welcome/39650/edit）：

function pos(d,i) { return d.x + (i * d.size); } // rect position
function size(d,i) { return d.size; }            // rect size
function f(d,i) { return d.color; }              // rect color

// add the top-level svg element and size it
vis = d3
    .select('#container')
    .append('svg')
    .attr('width',200)
    .attr('height',200);

// add the nested svg elements
var nested = vis
    .selectAll('g')
    .data(data.segments)
    .enter()
    .append('g');

// Add a rectangle for each color
nested
    .selectAll('rect')
    .data(function(d) {
        // **** ATTENTION ****
        // Is there a more idiomatic, d3-ish way to approach this?
        var expanded = [];
        for(var i = 0; i < d.colors.length; i++) {
            expanded.push({
                color : d.colors[i],
                x     : d.x
                size  : d.size });
        }
        return expanded;
    })
    .enter()
    .append('rect')
    .attr('x',pos)
    .attr('y',pos)
    .attr('width',size)
    .attr('height',size)
    .attr('fill',f);

有没有更好的和/或更惯用的方法来使用 d3.js 从数据结构中的两个不同嵌套级别访问数据？

编辑

这是我想出的解决方案，感谢 meetamit's answer 的闭包想法，感谢 nautat's answer 使用更多惯用的 d3.js 缩进：

$(function() {
  var
    vis = null,
    width = 200,
    height = 200,
    data = {
        segments : [
           {x : 20, y : 0, size : 10, colors : ['#ff0000','#00ff00']},
           {x : 40, y : 0, size : 20, colors : ['#0000ff','#000000']}
        ]
    };

    // set the color
    function f(d,i) {return d;}

    // set the position
    function pos(segment) {
      return function(d,i) {
        return segment.x + (i * segment.size);
      };
    }

    // set the size
    function size(segment) {
      return function() {
        return segment.size;
      };
    }

    // add the top-level svg element and size it
    vis = d3.select('#container').append('svg')
        .attr('width',width)
        .attr('height',height);

    // add the nested svg elements
    var nested = vis
        .selectAll('g')
          .data(data.segments)
        .enter().append('g');

    // Add a rectangle for each color.  Size of rectangles is determined
    // by the "parent" data object.
    nested
    .each(function(segment, i) {
      var 
          ps = pos(segment),
          sz = size(segment);

      var colors = d3.select(this)
        .selectAll('rect')
          .data(segment.colors)
        .enter().append('rect')
          .attr('x', ps)
          .attr('y',ps)
          .attr('width', sz)
          .attr('height',sz)
          .attr('fill', f);
  });

});

这是完整的工作示例：http://jsbin.com/welcome/42885/edit

【问题讨论】：

为什么在你的 html 代码中需要嵌套 svg 标签？
我希望将与segment 对应的所有矩形组合在一起。如果我理解正确，我可以通过更改父svg 元素的x 和y 属性来移动第一个segment 中的所有矩形。如果有更好的方法，我很想知道。
带有变换属性的组元素怎么样：<g transform='translate(10,20)'>...</g>:w3.org/TR/SVG/coords.html#TransformAttribute。如果我理解正确，您应该为每幅图只使用一个 svg。
是的，你是对的，<g> 元素看起来确实是我应该使用的。我已经编辑了问题和 JSBin 代码以使用 <g> 而不是 <svg> 元素。感谢您指出这一点！

标签： javascript d3.js

【解决方案1】：

你可以使用闭包

var nested = vis
  .selectAll('g')
  .data(data.segments);


nested.enter()
  .append('g')
  .each(function(segment, i) {
    var colors = d3.select(this)
      .selectAll('rect')
      .data(segment.colors);

    colors.enter()
      .append('rect')
      .attr('x', function(color, j) { return pos(segment, j); })
      // OR: .attr('x', function(color, j) { return segment.x + (j * segment.size); })
      .attr('width', function(color, j) { return size(segment); })
      .attr('fill', String);
  });

【讨论】：

使用闭包对我来说感觉最好。我不得不稍微修改您的示例以使事情正常进行，但总体思路正是我想要的。有关完整的工作示例，请参阅我的问题的编辑。

【解决方案2】：

您可以执行以下操作来重组数据：

newdata = data.segments.map(function(s) {
  return s.colors.map(function(d) {
    var o = this; // clone 'this' in some manner, for example:
    o = ["x", "size"].reduce(function(obj, k) { return(obj[k] = o[k], obj); }, {});
    return (o.color = d, o); 
  }, s);
});

这会将您的输入数据转换为：

// newdata:
    [
      [
        {"size":10,"x":20,"color":"#ff0000"},
        {"size":10,"x":20,"color":"#00ff00"}],
      [
        {"size":20,"x":40,"color":"#0000ff"},
        {"size":20,"x":40,"color":"#000000"}
      ]
    ]

然后可以在标准的嵌套数据选择模式中使用：

var nested = vis.selectAll('g')
    .data(newdata)
  .enter().append('g');

nested.selectAll('rect')
    .data(function(d) { return d; })
  .enter().append('rect')
    .attr('x',pos)
    .attr('y',pos)
    .attr('width',size)
    .attr('height',size)
    .attr('fill',f);

顺便说一句，如果您想更符合 d3 习惯，我会为链式方法稍微更改缩进样式。 Mike 建议每次选择更改时使用半缩进。这有助于使您非常清楚您正在处理的选择。例如在最后一个代码中；变量nested 指的是enter() 选择。请参阅“选择”一章：http://bost.ocks.org/mike/d3/workshop/

【讨论】：

感谢您提供有关缩进样式的提示。我注意到编写 d3.js 代码的人是这样缩进的，但不理解动机。这个链接很有帮助！
我想说这实际上是 D3 的做事方式（根据 Mike Bostock 的说法）。见这里bost.ocks.org/mike/nest/#data

【解决方案3】：

在您真正开始创建元素之前，我会尝试将colors 展平。如果数据发生变化，我会更新这个扁平化的数据结构并重绘。扁平化的数据需要存储在某个地方才能实现真正的 d3 转换。

这是一个对我有用的更长的例子。你可以在here看到它。

代码如下：

var data = {
    segments : [
        {x : 20, size : 10, colors : ['#ff0000','#00ff00']},
        {x : 40, size : 20, colors : ['#0000ff','#000000']}
    ]
};

function pos(d,i) { return d.x + (i * d.size); } // rect position
function size(d,i) { return d.size; }            // rect size
function f(d,i) { return d.color; }              // rect color

function flatten(data) {
    // converts the .colors to a ._colors list
    data.segments.forEach( function(s,i) {
        var list = s._colors = s._colors || [];
        s.colors.forEach( function(c,j) {
            var obj = list[j] = list[j] || {}
            obj.color = c
            obj.x = s.x
            obj.size = s.size
        });
    });
}

function changeRect(chain) {
    return chain
    .transition()
    .attr('x',pos)
    .attr('y',pos)
    .attr('width',size)
    .attr('height',size)
    .attr('fill',f)
    .style('fill-opacity', 0.5)
}

vis = d3
.select('#container')
.append('svg')
.attr('width',200)
.attr('height',200);

// add the top-level svg element and size it
function update(){

    flatten(data);

    // add the nested svg elements
    var all = vis.selectAll('g')
    .data(data.segments)

    all.enter().append('g');
    all.exit().remove();

    // Add a rectangle for each color
    var rect = all.selectAll('rect')
    .data(function (d) { return d._colors; }, function(d){return d.color;})

    changeRect( rect.enter().append('rect') )
    changeRect( rect )

    rect.exit().remove()
}

function changeLater(time) {
    setTimeout(function(){
        var ds = data.segments
        ds[0].x    = 10 + Math.random() * 100;
        ds[0].size = 10 + Math.random() * 100;
        ds[1].x    = 10 + Math.random() * 100;
        ds[1].size = 10 + Math.random() * 100;
        if(time == 500)  ds[0].colors.push("orange")
        if(time == 1000) ds[1].colors.push("purple")
        if(time == 1500) ds[1].colors.push("yellow")
        update()
    }, time)
}

update()
changeLater(500)
changeLater(1000)
changeLater(1500)

这里重要的是 flatten 函数，它执行数据转换并将结果存储/重用为父数据元素中的 _colors 属性。另一条重要的线是；

.data(function (d) { return d._colors; }, function(d){return d.color;})

指定从哪里获取数据（第一个参数）以及每个数据元素的唯一 ID 是什么（第二个参数）。这有助于识别过渡等的现有颜色。

【讨论】：