D3.js 如何在d3中禁用画笔扩展

D3.js 如何在d3中禁用画笔扩展,d3.js,D3.js,对于d3中的笔刷,如何使其长度固定?我想做的是,用户可以更改画笔的位置,但不能更改画笔的大小 我用 但是如何使用brushed()?下面是一个基于以下内容的快速示例: 完整代码: svg{ 字体:10px无衬线; } .区域{ 填充:钢蓝; 剪辑路径:url(#剪辑); } .轴线路径, .轴线{ 填充:无; 行程:#000; 形状渲染:边缘清晰; } .刷{ 冲程:#fff; 填充不透明度:.125; 形状渲染:边缘清晰; } var保证金={ 前10名, 右:10,, 底数:100,

对于d3中的笔刷,如何使其长度固定?我想做的是,用户可以更改画笔的位置,但不能更改画笔的大小

我用


但是如何使用
brushed()

下面是一个基于以下内容的快速示例:


完整代码:


svg{
字体:10px无衬线;
}
.区域{
填充:钢蓝;
剪辑路径:url(#剪辑);
}
.轴线路径,
.轴线{
填充:无;
行程:#000;
形状渲染:边缘清晰;
}
.刷{
冲程:#fff;
填充不透明度:.125;
形状渲染:边缘清晰;
}
var保证金={
前10名,
右:10,,
底数:100,
左:40
},
边缘2={
排名:430,
右:10,,
底数:20,
左:40
},
宽度=960-margin.left-margin.right,
高度=500-页边距.顶部-页边距.底部,
高度2=500-边缘2.顶部-边缘2.底部;
var parseDate=d3.time.format(“%b%Y”).parse;
var x=d3.time.scale().range([0,width]),
x2=d3.time.scale().范围([0,宽度]),
y=d3.刻度.线性().范围([高度,0]),
y2=d3.刻度.线性().范围([height2,0]);
var xAxis=d3.svg.axis().scale(x).orient(“底部”),
xAxis2=d3.svg.axis().scale(x2.orient(“底部”),
yAxis=d3.svg.axis().scale(y).orient(“左”);
var brush=d3.svg.brush()
.x(x2)
.在(“刷子”,刷子);
var area=d3.svg.area()
.插入(“单调”)
.x(功能(d){
返回x(d.日期);
})
.y0(高度)
.y1(功能(d){
返回y(d.价格);
});
var area2=d3.svg.area()
.插入(“单调”)
.x(功能(d){
返回x2(d.日期);
})
.y0(高度2)
.y1(功能(d){
返回y2(d.价格);
});
var svg=d3.选择(“正文”).追加(“svg”)
.attr(“宽度”,宽度+边距。左侧+边距。右侧)
.attr(“高度”,高度+边距。顶部+边距。底部);
svg.append(“defs”).append(“clipPath”)
.attr(“id”、“剪辑”)
.append(“rect”)
.attr(“宽度”,宽度)
.attr(“高度”,高度);
var focus=svg.append(“g”)
.attr(“类”、“焦点”)
.attr(“转换”、“平移”(+margin.left+)、“+margin.top+”);
var context=svg.append(“g”)
.attr(“类”、“上下文”)
.attr(“transform”、“translate”(+margin2.left+)、“+margin2.top+”);
var数据=“{”日期“:”2000年1月“,”价格“:”1394.46“},{”日期“:”2000年2月“,”价格“:”1366.42“},{”日期“,”2000年3月“,”价格“:”1498.58“,”日期“,”2000年4月“,”价格“:”日期“:”2000年5月“,”价格“:”1420.6“,”日期“,”2000年6月“,”价格“:”1454.6“,”日期“,”2000年7月“,”价格“,”价格“,”日期“,”2000年8月“,”价格“,”价格“,”价格“:”日期“,”价格“:”2000年9月“,”日期:2000年10月,价格:1429.4,日期:2000年11月,价格:1314.95,日期:2000年12月,价格:1320.28,日期:2001年1月,价格:1366.01,日期:2001年2月,价格:1239.94,日期:2001年3月,价格:1160.33,日期:2001年4月,价格:1249.46,日期:2001年5月,价格:1255.82,日期:2001年6月,价格:价格:日期:2001年9月价格:1040.94日期:2001年10月价格:1059.78日期:2001年11月价格:1139.45日期:2001年12月价格:1148.08日期:2002年1月价格:1130.2日期:2002年2月价格:1106.73日期:2002年3月价格:1147日价格:{日期:2002年4月价格:1076.92日期:2002年5月价格:1067.14日期:2002年6月价格:989.82日期:2002年7月价格:911.62日期:2002年8月价格:916.07日期:2002年9月价格:815.28日期:2002年10月价格:885.76日期:2002年11月价格:936.31日期:2002年12月价格2003年1月,价格:855.7,日期:2003年2月,价格:841.15,日期:2003年3月,价格:848.18,日期:2003年4月,价格:916.92,日期:2003年5月,价格:963.59,日期:2003年6月,价格:974.5,日期:2003年7月,价格:990.31,日期:2003年8月,价格:1008.01,日期:2003年9月,日期:“:”1050.71“,”日期“,”2003年11月“,”价格“:”1058.2“,”日期“,”2003年12月“,”价格“,”1111.92“,”日期“,”2004年1月“,”价格“,”1131.13“,”日期“,”2004年2月“,”价格“,”1144.94“,”日期“,”2004年3月“,”价格“:”1126.21“,”日期“,”2004年4月“,”价格“,”日期“,”1107.3“,”日期“,”2004年5月“,”价格“,”1120.68“,”日期“,”2004年6月“,”价格“,”“1101.72”{“日期”:“2004年8月”,“价格”:“1104.24”},{“日期”:“2004年9月”,“价格”:“1114.58”},{“日期”:“2004年10月”,“价格”:“1130.2”},{“日期”:“2004年11月”,“价格”:“1173.82”},{“日期”:“2004年12月”,“价格”:“1211.92”},{“日期”:“2005年1.27”{“日期”:“2005年2月”,“价格”:“1203.6”{“日期”:“2005年3月”,“价格”:“价格”:“日期”:“2005年10.59”{“日期”:“2005年4月”{“价格”:价格:日期:2005年5月价格:2005年9月价格:1228.81日期:2005年10月价格:1207.01日期:2005年11月价格:1249.48日期:2005年12月价格:1248.29日期:2006年1月价格:1280日期:2005年1月价格:1228.81日期:2005年10月价格:1207.01日期:2005年11月价格:1249.48日期:价格:日期:2006年4月价格:1310.61日期:2006年5月价格:1270.09日期:2006年6月价格:1270.2日期:2006年7月价格:1276.66日期:2006年8月价格:1303.82日期:2006年9月价格:1335.85日期:2006年10月价格:270.2日期:2006年7月价格:1276.66日期:2006年8月价格:1303.82日期:2006年11月,价格:1400.63,日期:2006年12月,价格:1418.3,日期:2007年1月,价格:1438.24,日期:2007年2月,价格:1406.82,日期:2007年3月,价格:1420.86,日期:2007年4月,价格:1482.37,日期:2007年5月,价格:1530.62,日期:2007年6月,价格:1503.35,日期:2007年7月,日期:2007年8月,价格:1473.99,日期:2007年9月,第
var brush = d3.svg.brush()
  .x(xOverview)
  .extent([0, 1/10])
  .on("brush", brushed);
// get brush
var b = context
  .select('.brush');
// remove ability to resize it
b.selectAll('.resize')
  .remove();
// remove ability to select from background
b.select('.background')
  .remove();
// set it to a size
brush.extent([new Date(2000, 0, 1),new Date(2001, 0, 1)])
// draw it
brush(b);
// fire redraw event
brush.event(b);