Question

我正在尝试实施多层次＆＃39;与d3库绑定。我有一组对象（Manager），其中每个对象都包含它自己的一组项（Employees）。结果页面必须包含每个Manager的元素。 Manager元素还必须包含源对象中列出的每个Employee的一个元素。我能够建立初始布局。但是在更新时，似乎d3无法找到现有元素之间的匹配变更数据。它只是增加了重复的员工。

这里是我的示例代码的小提琴 http://jsfiddle.net/02bptmd6/

var initialData = [
    {k:1, v:150, items: [{k:1, v:1}, {k:2, v:2}, {k:3, v:3}]},
    {k:2, v:100, items: [{k:4, v:4}, {k:5, v:5}]},
    {k:3, v:150, items: [{k:6, v:6}, {k:7, v:7}, {k:8, v:8}]},
    {k:4, v:60, items: [{k:9, v:9}]},
    {k:5, v:200, items: [{k:10, v:10}, {k:11, v:11}, {k:12, v:12}, {k:13, v:13}]}];

function updateChart(data){
    var bars = d3.select('#container').selectAll('.bar')
        .data(data, function(d) {return d.k;});

    bars.enter()
        .append('div')
        .classed('bar', true);

    bars.transition(1000)
        .style('width', function(d) {return d.v + 'px';});

    bars.exit().transition(1000)
        .style('width', function(d) {return '0px';})
        .style('height', function(d) {return '0px';})
        .remove();

    var items = bars.selectAll('.items')
        .data(function(d) {return d.items;}, function(d){return d.k;});
    items
        .enter()
        .append('div')
        .classed('item', true)
        .append('span')
        .text(function(d) {return d.v});
    items.exit()
        .classed('item_exit', true)        
        .remove();
}

function changeData(){
    var data = [
        {k:1, v:150, items: [{k:1, v:1}, {k:2, v:2}]},
        {k:4, v:150, items: [{k:9, v:9}, {k:14, v:14}, {k:15, v:15}]},
        {k:5, v:200, items: [{k:10, v:10}, {k:11, v:11}, {k:12, v:12}]}];

    updateChart(data);
}

updateChart(initialData);

提前致谢！

Answer 1

发现错误。我在'Employees'中使用'item'类，但用'.items'选择器选择它们。

与d3js的多级绑定

1 个答案: