Question

我刚刚开始D3.js。我使用this example创建了一个简单的圆环图。我的问题是，如果我有一个对象数组作为我的数据源 - ex的数据点。将是1。foo或1。吧 - 我想在它们之间切换，我将如何做到这一点？我目前的解决方案看起来很丑陋，但这不是正确的做法 - 下面的代码。

//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访问器而不是定义新的饼图函数？

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

D3.js - 布局 - 价值访问者

1 个答案: