我已经在我的react应用程序中实现了D3画笔功能。我想限制画笔的最小和最大宽度。这是我的代码
createBarChart() {
const svg = select(this.myRef.current);
var margin = {
top: 20,
right: 20,
bottom: 110,
left: 40
},
margin2 = {
top: 150,
right: 20,
bottom: 30,
left: 40
},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
height2 = svg.attr("height") - margin2.top - margin2.bottom;
console.log(height2)
parseDate = timeParse("%b %Y");
var x = scaleLinear().range([0, width]),
x2 = scaleLinear().range([0, width]),
y = scaleLinear().range([height, 0]),
y2 = scaleLinear().range([height2, 0]);
var xAxis = axisBottom(x),
xAxis2 = axisBottom(x2),
yAxis = axisLeft(y);
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
var brush = brushX()
.extent([
[0, 0],
[width, height2]
])
.on("brush end", this.brushed.bind(this, x, x2, xAxis, width, focus, context));
var area2 = area()
.curve(curveMonotoneX)
.x(function(d) {
return x2(d.date);
})
.y0(height2)
.y1(function(d) {
return y2(d.price);
});
_zoom = zoom()
.scaleExtent([1, Infinity])
.translateExtent([
[0, 0],
[width, height]
])
.extent([
[0, 0],
[width, height]
])
.on("zoom", this.zoomed.bind(this, x, x2, xAxis, width, focus, context, brush));
_area = area()
.curve(curveMonotoneX)
.x(function(d) {
return x(d.date);
})
.y0(height)
.y1(function(d) {
return y(d.price);
});
let scale = scaleLinear();
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
console.log("execute")
var d_data = [{
date: 1,
price: 3
}, {
date: 2,
price: 4
}, {
date: 3,
price: 5
}, {
date: 4,
price: 32
}, {
date: 5,
price: 8
}, {
date: 6,
price: 11
}, {
date: 7,
price: 3
}, {
date: 8,
price: 33
}, {
date: 9,
price: 3
}, {
date: 10,
price: 12
}, {
date: 11,
price: 42
}, {
date: 12,
price: 7
}, ]
x.domain([1, 12]);
y.domain([0, max(d_data, function(d) {
return d.price;
})]);
x2.domain(x.domain());
y2.domain(y.domain());
let line_func = line()
.x((d, i) => ((this.state.width / d_data.length) * (i)))
.y(d => (this.state.height - scale(d.price)))
focus.append("path")
.datum(d_data)
.attr("class", "area")
.attr("d", line_func)
focus.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
context.append("path")
.datum(d_data)
.attr("class", "area")
.attr("d", area2)
context.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move, x.range());
svg.append("rect")
.attr("class", "zoom")
.attr("fill", "none")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(_zoom);
}
brushed(x, x2, xAxis, width, focus, context) {
//console.log("brushed")
if (event.sourceEvent && event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
var s = event.selection || x2.range();
if ((((s[1] - s[0]) / width) * 100) > 5.55) {}
x.domain(s.map(x2.invert, x2));
focus.select(".area").attr("d", _area);
focus.select(".axis--x").call(xAxis);
console.log((((s[1] - s[0]) / width) * 100))
select(".zoom").call(_zoom.transform, zoomIdentity
.scale(width / (s[1] - s[0]))
.translate(-s[0], 0));
};
zoomed(x, x2, xAxis, width, focus, context, brush) {
//console.log("zoomed")
if (event.sourceEvent && event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
var t = event.transform;
x.domain(t.rescaleX(x2).domain());
let class_area = document.getElementsByClassName("area")
focus.select(".area").attr("d", _area);
focus.select(".axis--x").call(xAxis);
context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
};
当前看起来像这样
我想限制笔刷的选择矩形宽度。最小值应为总宽度的10%,最大值应为总宽度的20%。我怎么有
我尝试过的操作:在brushed()函数中,我放置了一个if
循环
brushed(x, x2, xAxis, width, focus, context) {
if (event.sourceEvent && event.sourceEvent.type === "zoom") return;
var s = event.selection || x2.range();
//check if rectangle width is greater than 10% of total width
if ((((s[1] - s[0]) / width) * 100) > 10) {
//execute code
}
}
失败。我想我把支票放在错误的位置。我也不确定是否应该有支票吗?
答案 0 :(得分:2)
使用您在your comment中链接的代码,这是我的解决方案:
设置两个变量以存储画笔大小的最后一个有效值...
let previousS0, previousS1;
...,您将在brushed
函数中填充
var s = d3.event.selection || x2.range();
previousS0 = s[0];
previousS1 = s[1];
但是,在分配这些值之前,重要的部分是:使用条件画笔,您将在画笔组(此处称为brush.move
)上调用brushGroup
:
if((((s[1] - s[0])/width)*100) < 10){
brushGroup.call(brush.move, [previousS0, previousS1]);
return;
};
这是做什么的:给定条件(即所选区域小于画笔范围的10%),使用先前的有效值设置所选区域的大小,然后从函数中返回。
这是更新的bl.ocks:https://bl.ocks.org/GerardoFurtado/08cca27078d34e5112257320689b376d/9d18a2e8bbe7d92ceb2874cbb9ed4378e0b6c2ef