D3.js Focus+Context via Brushing Ordinal Scale
D3.js Focus+Context via Brushing Ordinal Scale
我对 d3.js 还是很陌生,我已经通过刷涂向我的散点图添加了焦点 + 上下文,该散点图具有对数 y 轴和有序 x 轴刻度,但它无法正常工作故意的。刷涂似乎在 X 轴上的偏移处起作用,但不仅显示选择的 item/items。
下面是我刷的函数:
// Brush Function
function brushed() {
var extent = brush.extent();
var d = xScale2.domain(),
r = xScale2.range();
extent = extent.map(function(e) { return d[d3.bisect(r, e) - 1]; });
xScale.domain(brush.empty() ? d : extent);
focus.select(".x.axis")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate (-65)");
focus.selectAll(".point")
.attr("d", d3.svg.symbol().type(function(d) { return symbols[d.TYPE_CODE]; }))
.attr("transform", function(d) { return "translate(" + xScale(dateFn(d)) + "," + yScale(d.TYPE_VALUE) + ")"; })
.style("fill", function(d) { return colors[d.TYPE_CODE]; });
}
如果有人可以帮助解决这个问题(尤其是我必须更改的所有地方以及如何更改),我很乐意让它工作并了解我做错了什么。
找到我自己的问题解决方案。
将画笔功能更改为:
// Brush Function
function brushed() {
var extent = brush.extent();
var d = xScale2.domain();
// Find out what is selected between the extent on the Ordinal Axis.
var SymbolInside = data.filter(function(d) {
return extent[0] <= xScale2(dateFn(d)) && xScale2(dateFn(d)) <= extent[1];
});
// Convert the Array of objects to return a single array of dates used for the ordinal axis.
SymbolInside = SymbolInside.map(function (d) { return dateFn(d); });
xScale.domain(brush.empty() ? d : SymbolInside);
focus.select(".x.axis")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate (-65)");
focus.selectAll(".point")
.attr("d", d3.svg.symbol().type(function(d) { return symbols[d.TYPE_CODE]; }))
.attr("transform", function(d) { return "translate(" + xScale(dateFn(d)) + "," + yScale(d.TYPE_VALUE) + ")"; })
.style("fill", function(d) { return colors[d.TYPE_CODE]; });
}
我对 d3.js 还是很陌生,我已经通过刷涂向我的散点图添加了焦点 + 上下文,该散点图具有对数 y 轴和有序 x 轴刻度,但它无法正常工作故意的。刷涂似乎在 X 轴上的偏移处起作用,但不仅显示选择的 item/items。
下面是我刷的函数:
// Brush Function
function brushed() {
var extent = brush.extent();
var d = xScale2.domain(),
r = xScale2.range();
extent = extent.map(function(e) { return d[d3.bisect(r, e) - 1]; });
xScale.domain(brush.empty() ? d : extent);
focus.select(".x.axis")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate (-65)");
focus.selectAll(".point")
.attr("d", d3.svg.symbol().type(function(d) { return symbols[d.TYPE_CODE]; }))
.attr("transform", function(d) { return "translate(" + xScale(dateFn(d)) + "," + yScale(d.TYPE_VALUE) + ")"; })
.style("fill", function(d) { return colors[d.TYPE_CODE]; });
}
如果有人可以帮助解决这个问题(尤其是我必须更改的所有地方以及如何更改),我很乐意让它工作并了解我做错了什么。
找到我自己的问题解决方案。
将画笔功能更改为:
// Brush Function
function brushed() {
var extent = brush.extent();
var d = xScale2.domain();
// Find out what is selected between the extent on the Ordinal Axis.
var SymbolInside = data.filter(function(d) {
return extent[0] <= xScale2(dateFn(d)) && xScale2(dateFn(d)) <= extent[1];
});
// Convert the Array of objects to return a single array of dates used for the ordinal axis.
SymbolInside = SymbolInside.map(function (d) { return dateFn(d); });
xScale.domain(brush.empty() ? d : SymbolInside);
focus.select(".x.axis")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate (-65)");
focus.selectAll(".point")
.attr("d", d3.svg.symbol().type(function(d) { return symbols[d.TYPE_CODE]; }))
.attr("transform", function(d) { return "translate(" + xScale(dateFn(d)) + "," + yScale(d.TYPE_VALUE) + ")"; })
.style("fill", function(d) { return colors[d.TYPE_CODE]; });
}