我有一个问题,我几周没能解决。我正在研究这个例子的修改版本:http://bl.ocks.org/mbostock/1667367我最初定义了画笔,因此它的画笔范围介于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);
}
它与示例略有不同...因为我一直在修改它以完成与基本示例不同的事情。但是,第一条评论表明我应该在声明画笔后调用这个刷子函数(参见第一篇文章)。但是,调用此函数不会执行任何操作(或者至少,它不会将焦点区域更新到画笔的范围)。你有什么建议吗?
答案 0 :(得分:1)
我为迟到两年来回答道歉但我刚刚遇到同样的情况,这是我在这个主题上找到的唯一资源。我能够弄清楚,所以希望这将有助于其他任何偶然发现它的人。
原始问题中的代码几乎一直存在,它只是没有对范围初始化进行正确的缩放。
我使用的数据是一个对象数组,其中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
后你可以调用{{ 1}}做你想要的任何更新。
最终,您的主要问题似乎是获得正确的类型。使用brushed
进行初始化,但是如果您在使用鼠标实际滑动焦点时调用[0.5, 0.8]
,则brushed
将为brush.extent()
。这是有道理的,因为我们将这个程度传递给[Date(), Date()]
。因此,在初始化画笔之前设置所有缩放,以便初始化范围可以是x.domain
,然后其他一切都是肉汁。
答案 1 :(得分:0)
只要以编程方式更改画笔范围,就需要执行类似于画笔函数的操作。调整x.domain的大小,刷新视图。
function brushed() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.select("path").attr("d", area);
focus.select(".x.axis").call(xAxis);
}
如果这不能解决您的问题,请考虑提供一些代码示例。