Question

编辑：JSBin无法工作转到JS fiddle查看我的代码

我用d3和crossfilter训练我的自我，我遇到了一些困难。
我试图创建一个链接函数来创建条形图。 我的想法是不要为我想要创建的每个条形图反复编写所有代码。
我受到了Fast Multidimensional Filtering for Coordinated Views这个例子的启发，这就是我想做的事情（你可以找到代码Here）。

但是我想在我的通用barChart功能中加入一些个人接触我决定用链接功能来做这个例子。
我知道如何创建任意数量的图形，但我不明白，（当刷子事件出现时），如何根据过滤器重绘所有栏。

如果我想在函数外部进行，我会再次定义所有属性，如x，y，轴等，具体取决于新数据，这是过滤后的数据，如下所示：

var updateRange = function(filt){
    data = dimension.filter(filt) //assuming dimension is a crossfilter dimension
    // Scale the range of the data again 
x.domain([0, d3.max(data, function(d) { return d.key; })+1]);

// Select the section we want to apply our changes to

var chart = d3.select(".chart")
//Update all rects

chart.selectAll("rect.hidden")
   .data(data)
   .transition()
   .delay(function(d, i) {
        return i * 50;
    })
   .duration(500)
   .attr("y", function(d) {
        return y2(d.value);
   })
   .attr("height", function(d) {
        return height - y2(d.value);
});

我做了一个JSBin来讨论我们如何更新图表这是我使用的brush函数。

brush.on("brushstart", function() {
  var div = d3.select(this.parentNode.parentNode.parentNode);
  div.select(".title a").style("display", null);
});

brush.on("brush", function() {
  var g = d3.select(this.parentNode),
    extent = brush.extent();
  if (round) g.select(".brush")
    .call(brush.extent(extent = extent.map(round)))
    .selectAll(".resize")
    .style("display", null);
  g.select("#clip-" + id + " rect")
    .attr("x", x(extent[0]))
    .attr("width", x(extent[1]) - x(extent[0]));
  dimension.filter(extent);
});

brush.on("brushend", function() {
  if (brush.empty()) {
    var div = d3.select(this.parentNode.parentNode.parentNode);
    div.select(".title a").style("display", "none");
    div.select("#clip-" + id + " rect").attr("x", null).attr("width", width);
    dimension.filterAll();
  }
)};

等待你的评论，
克里斯。

编辑：一些澄清

更清楚的是，当我渲染图表并使用画笔时，数据被正确过滤。 （如果我把一些console.log看到根据画笔过滤的数据）
但是图表不会根据画笔更新。我知道问题来自于我使用刷子事件（brush.on(）我想我需要以某种方式调用渲染函数，但不知道如何使用链接函数来应用于所有图表。

编辑：使用外部画笔更新图表

当外部设置画笔时，图表现已成功更新（点击链接）。只需添加此行

if (brushDirty) {
  brushDirty = false;
  g.selectAll(".brush").call(brush);
  div.select(".title a").style("display", brush.empty() ? "none" : null);
  if (brush.empty()) {
    g.selectAll("#clip-" + id + " rect")
        .attr("x", 0)
        .attr("width", width);
  } else {
    var extent = brush.extent();
    g.selectAll("#clip-" + id + " rect")
        .attr("x", x(extent[0]))
        .attr("width", x(extent[1]) - x(extent[0]));
  }
}

Answer 1

要更新图表，您可以将其删除，然后使用新过滤器重绘。像这样：

 d3.selectAll(".chart").selectAll("svg").remove();

或者

 $('#chart'+chart_id+' svg').remove();

然后通过再次使用更新的数据再次调用绘图函数来重绘它。

希望这会对你有所帮助。对不起如果我误解了你。我需要训练我的英语= P

编辑：

我发现这些例子没有删除。它可能会对你有帮助。

http://jsfiddle.net/sx9myywh/

https://bl.ocks.org/RandomEtc/cff3610e7dd47bef2d01

如何重绘图表：d3.js链接函数和交叉滤波器过滤

编辑：JSBin无法工作转到JS fiddle查看我的代码

编辑：一些澄清

编辑：使用外部画笔更新图表

1 个答案: