0

我刚开始使用D3.js。我使用这个例子创建了一个足够简单的圆环图。我的问题是，如果我有一个对象数组作为我的数据源 - ex 的数据点。将是1 .foo 或1 .bar - 我想在它们之间切换，我该怎么做呢？我当前的解决方案看起来很丑陋，而且它不是正确的方法 - 下面的代码。

//Call on window change event
//Based on some parameter, change the data for the document
//vary d.foo to d.bar and so on

var donut = d3.layout.pie().value(function(d){ return d.foo})
arcs = arcs.data(donut(data)); // update the data

除了定义一个新的饼函数之外，有没有办法value在运行时设置访问器？

4

1 回答 1

1

通常，要切换正在显示的数据，您将创建一个redraw()函数，然后更新图表的数据。在重绘中，您需要确保处理这三种情况 - 修改数据元素时应该做什么，添加新数据元素时应该做什么，以及删除数据元素时应该做什么。

它通常看起来像这样（此示例通过平移更改数据集，但这并不重要）。请参阅http://bl.ocks.org/1962173上的完整代码。

function redraw () {

    var rects, labels
      , minExtent = d3.time.day(brush.extent()[0])
      , maxExtent = d3.time.day(brush.extent()[1])
      , visItems = items.filter(function (d) { return d.start < maxExtent && d.end > minExtent});

    ...

    // upate the item rects
    rects = itemRects.selectAll('rect')
        .data(visItems, function (d) { return d.id; })   // update the data
        .attr('x', function(d) { return x1(d.start); })
        .attr('width', function(d) { return x1(d.end) - x1(d.start); });

    rects.enter().append('rect') // draw the new elements
        .attr('x', function(d) { return x1(d.start); })
        .attr('y', function(d) { return y1(d.lane) + .1 * y1(1) + 0.5; })
        .attr('width', function(d) { return x1(d.end) - x1(d.start); })
        .attr('height', function(d) { return .8 * y1(1); })
        .attr('class', function(d) { return 'mainItem ' + d.class; });

    rects.exit().remove(); // remove the old elements
}
于 2012-05-05T19:33:45.500 回答