Javascript 如何使用d3进行缩放

我正在用d3绘制一个简单的条形图，我有一个x轴设置和画笔设置，这样我可以画笔“选择”一组条形图。然后我想向下钻取并缩放图表，使其仅包含这些条形图。下面的代码可以工作，里面的颜色和画笔触摸到的颜色会变成正确的颜色，但是我不能让东西缩放

我看了这个：还有一堆其他的东西，但我就是想不出来

var刷；
函数go3（）
{
var数据集=[]；
var m=40；
var计数=500；
数据集推送（m）；
对于（var i=0；i<150；i++）{//循环25次
var newNumber=Math.random（）*m；//新随机数（0-30）
dataset.push（newNumber）；//向数组中添加新编号
}
边距={顶部：10，右侧：10，底部：30，左侧：10}，
宽度=960-margin.left-margin.right，
高度=500-页边距.顶部-页边距.底部
w=宽度；
h=高度；
yScale=d3.scale.linear（）.domain（[0，d3.max（数据集）]）.range（[0，h*.95]）；
xScale=d3.scale.linear（）
.范围（[0，w]）
.域（[0，w]）；
var xAxis=d3.svg.axis（）.scale（xScale.orient（“底部”）；
log（“Max:+d3.Max（数据集））；
svg=d3。选择（“主体”）
.append（“svg”）
.attr（“宽度”，w+边距。左侧+边距。右侧）
.attr（“高度”，h+margin.top+margin.bottom）
;
svg.append（“rect”）
.attr（“笔划”、“灰色”）
.attr（“笔划宽度”，1）
.attr（“宽度”，w+边距。左侧+边距。右侧）
.attr（“高度”，h+margin.top+margin.bottom）
.attr（“填充”，“#FFFFFF”）
.分类（“主容器”，真实）；
svg.append（“rect”）
.attr（“宽度”，w）
.attr（“高度”，h）
.attr（“笔划”、“灰色”）
.attr（“笔划宽度”，0）
.attr（“填充”、“伊菲”）
.attr（“x”，左边距）
.attr（“y”，页边距。顶部）
.classed（“可刷容器”，真实）
;
xAxisGroup=svg.append（“g”）
.attr（“转换”、“平移”（“+margin.left+”、“+（h+margin.top）+”））
.呼叫（xAxis）
填充=2；
rects=svg.append（“g”）.selectAll（“可刷”）
.数据（数据集）
.输入（）
.append（“rect”）
.分类（“可刷”，真实）；
brush=d3.svg.brush（）
.x（xScale）
.打开（“刷子”，刷子移动）
.on（“刷端”，刷端）；
context=svg.append（“g”）
.attr（“类”、“上下文”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.attr（“类”、“刷”）
.呼叫（刷子）
.selectAll（'rect'）
.attr（'高度'，h）；
barWidth=w/dataset.length；
控制台。日志（“宽度：”+barWidth）；
直肠
.attr（“宽度”，4）
.attr（“高度”，函数（d，i）{返回yScale（d）}）
.attr（“笔划”、“黄色”）
.attr（“笔划宽度”，.3）
.attr（“x”，函数（d，i）{返回（i*barWidth+margin.left）}）
.attr（“y”，函数（d，i）{返回h-yScale（d）+margin.top}）
;
}
函数brushend（）{
var extent=brush.extent（）；
var min=范围[0]>=范围[1]？范围[1]：范围[0]；
var max=范围[0]>=范围[1]？范围[0]：范围[1]；
var lolobb=d3.selectAll（“rect.brushable”）；
var lob=lolobb[0]；
控制台日志（最小值+“-”+最大值）；
var i=0；
而（i

您可以通过在

“body”

上添加调用

缩放

功能来完成此操作，您可以通过执行以下操作来完成此操作：

svg = d3.select("body")
    .append("svg")
    .attr("width", w  + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
;

缩放部分是：

    .append("g")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))

然后添加

zoom（）

函数：

function zoom() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

---

。使用滚轮缩放。

您的小提琴示例似乎对我不起作用（但可能是我的终点）。不管怎么说，你有没有看过那本书？我能够通过这种方式在d3应用程序上进行缩放。他们有一个。没关系，我能让它工作一个。我明白了，我真正想要的是当有人完成刷牙时放大。当你检查小提琴时，你可以看到“选定”的矩形改变了颜色（通过改变样式）。我希望它也能放大。不是用卷轴wheel@mikeb缩放时，滚轮是默认设置，是否有不想使用它的原因？按图形中心进行基本缩放是否有效？或者您想根据所选区域进行缩放？是的，原因是我已将其设置为您可以选择条形图的某一部分，并且我想缩放到该部分。它可能是图表底部的10%，也可能是顶部的80%，也可能是中间的2%。我有“画笔”设置来“选择”要缩放的部分，我想缩放到它。@mikeb看起来你可能想做一些比缩放更复杂的事情。缩放到它就是缩放到选择的中心。或者选择“更大”而其他东西“更小”？还有，你怎么回到正常状态呢？好的，我有一个x轴1->500，有一堆竖条。用户使用“笔刷”选择区域，选择从x轴上的点100开始，到点200结束。我想做的是在放大时只显示100到200之间的条。我不知道还能叫它什么，因为它对我来说就像“放大”。

function zoom() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}