D3.js D3重绘画笔

我有一个问题已经好几个星期没能解决了。我正在处理这个示例的一个修改版本：我最初定义了笔刷，因此它的笔刷范围在0.5到0.8之间

var brush = d3.svg.brush()
    .x(x2)
    .extent([0.5, 0.8])
    .on("brush", brushed);

笔刷选择显示在正确的位置（在上下文图上），但焦点区域的初始视图仍设置为整个数据集的范围（而不是笔刷的剪裁区域）。我读过，定义画笔不会自动强制重新绘制区域，但我似乎不知道如何使焦点区域的视图自动缩放到画笔范围。有人能提供一些信息吗

更新1 我目前有一个名为Brushed的函数，它执行以下操作：

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select("path").attr("d", Light_area);
  focus.select(".x.axis").call(xAxis);
  Light_line_overlay.select("path").attr("d", Light_area);

  rules.select(".y.grid").call(make_x_axis_light()
          .tickSize(-height, 0, 0)
          .tickFormat("")
      );

  var xx0=brush.x()(brush.extent()[0]);
  var xx1=brush.x()(brush.extent()[1]);

  brushfill.attr("x", xx0);
  brushfill.attr("width", xx1-xx0);
}

---

它与示例略有不同。。。因为我一直在修改它来做与基本示例不同的事情。然而，第一条评论建议我在声明笔刷之后调用这个brushed函数（参见第一篇文章）。但是，调用此函数不会做任何事情（或者至少不会将焦点区域更新到笔刷的范围）。您有什么建议吗？

每当以编程方式更改笔刷范围时，您需要执行类似于brushed函数的操作。调整x.domain的大小，刷新视图

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select("path").attr("d", area);
  focus.select(".x.axis").call(xAxis);
}

---

<>如果这不能解决你的问题，考虑提供一些代码示例。 我很抱歉迟了两年才回答这个问题，但我遇到了同样的情况，这是我在这个话题上找到的唯一资源。我能够找到答案，所以希望这能帮助其他偶然发现它的人

原始问题中的代码几乎都在那里，只是在数据块初始化上没有正确的缩放

我正在使用的数据是一个对象数组，其中包含一个

ts

键（即历元毫秒），我将该键用于

x

值

// These are needed for the brush construction to know how to scale
x2.domain(x.domain());
y2.domain(y.domain());

// Pick out the ~50% and ~80% marks from the data
var N = data.length;
var cx0 = new Date(data[Math.floor(N*0.50)].ts);
var cx1 = new Date(data[Math.floor(N*0.80)].ts);

// Construct with that extent, which will leave the
// context box started in the correct position.
var brush = d3.svg.brush()
                  .x(x2)
                  .extent([cx0, cx1])
                  .on("brush", brushed)
;

// This is just the original brushed example 
function brushed() {
    x.domain(brush.empty() ? x2.domain() : brush.extent());
    focus.select(".area").attr("d", line);
    focus.select(".x.axis").call(xAxis);
}

...

var focus = svg.append("g")
               .attr("class", "focus")
               .attr("transform",
                     "translate(" + margin.left + "," + margin.top + ")")
;

// Now that focus is defined we can manually update it
brushed();

实际上，我在设置的最后保留了对

brushed

的调用，只是为了保持美观，但这里的要点只是为了说明，一旦定义了

focus

，您就可以调用

brushed

来执行您想要的任何更新

最终看来，您的主要问题是为范围选择合适的类型。使用

[0.5,0.8]

可以进行初始化，但是如果您在调用

brushed

时检查是否实际使用鼠标滑动焦点，

brush.extent（）

将是

[Date（），Date（）]

。这是有道理的，因为我们正在将该范围传递给

x.domain

。因此，这将在初始化画笔之前设置所有缩放，以便初始化范围可以是一个

日期

，然后所有其他内容都是肉汁