如何使用 d3 进行缩放

Question

我正在用 d3 绘制一个简单的条形图，我有一个 x 轴设置和画笔设置，这样我就可以刷“选择”一组条形图。然后我想向下钻取并缩放图表以仅包含这些条形图。以下代码有效，内部和被画笔触摸的条形颜色变为正确的颜色，但我无法使事物缩放。

我看过这个：http://bl.ocks.org/mbostock/1667367 和一堆其他的东西，只是想不通。

Here is a fiddle, can someone show me how to simply zoom the darn thing?

var brush;

function go3()
{
    var dataset = [];
    var m = 40;
    var count = 500;
    dataset.push(m);
    for (var i = 0; i < 150; i++) {           //Loop 25 times
        var newNumber = Math.random() * m;  //New random number (0-30)
        dataset.push(newNumber);             //Add new number to array
    }

    margin = {top: 10, right: 10, bottom: 30, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom


    w = width;
    h = height;

    yScale = d3.scale.linear().domain([0, d3.max(dataset)]).range([0, h * .95]);
    xScale = d3.scale.linear()
        .range([0, w])
        .domain([0, w]);
    var xAxis = d3.svg.axis().scale(xScale).orient("bottom");

    console.log("Max: " + d3.max(dataset));

    svg = d3.select("body")
        .append("svg")
        .attr("width", w  + margin.left + margin.right)
        .attr("height", h + margin.top + margin.bottom)
    ;

    svg.append("rect")
        .attr("stroke", "grey")
        .attr("stroke-width", 1)
        .attr("width", w + margin.left + margin.right)
        .attr("height", h + margin.top + margin.bottom)
        .attr("fill", "#FFFFFF")
        .classed("main-container", true);

    svg.append("rect")
        .attr("width", w)
        .attr("height", h)
        .attr("stroke", "grey")
        .attr("stroke-width", 0)
        .attr("fill", "#EEFFEE")
        .attr("x", margin.left)
        .attr("y", margin.top)
        .classed("brushable-container", true)
    ;

    xAxisGroup = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + (h + margin.top) + ")")
        .call(xAxis)

    padding=2;

    rects = svg.append("g").selectAll(".brushable")
        .data(dataset)
        .enter()
        .append("rect")
        .classed("brushable", true);


    brush = d3.svg.brush()
        .x(xScale)
        .on("brush", brushmove)
        .on("brushend", brushend);

    context = svg.append("g")
        .attr("class", "context")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("class", "brush")
        .call(brush)
        .selectAll('rect')
        .attr('height', h);

    barWidth = w / dataset.length;
    console.log("Width: " + barWidth);
    rects
        .attr("width", 4)
        .attr("height", function(d, i){ return yScale(d)})
        .attr("stroke", "yellow")
        .attr("stroke-width", .3)
        .attr("x", function(d, i){ return (i * barWidth + margin.left) })
        .attr("y", function(d, i){ return h - yScale(d) + margin.top} )
    ;
}

function brushend(){
    var extent = brush.extent();
    var min = extent[0] >= extent[1] ? extent[1] : extent[0];
    var max = extent[0] >= extent[1] ? extent[0] : extent[1];

    var lolobb = d3.selectAll("rect.brushable");
    var lob = lolobb[0];
    console.log(min + " - " + max);
    var i = 0;
    while( i <  lob.length ){
        var bbb = lob[i];
        try {
            var p = parseFloat(bbb.attributes.x.value);
            if(min <= p && max >= p) {
                d3.select(bbb).attr("fill", "#00FF00");
            } else {
                d3.select(bbb).attr("fill", "#000000");
            }
            i++;
        } catch(r) {
            console.log("BBB");
            console.log(bbb);
            console.log("Error with " + i);
            console.log(typeof(bbb));
            console.log(r);
        }
    }
    console.log(min + " - " + max);
    console.log(lolobb);
}

function brushmove() {
    var extent = brush.extent();
}

Answer 1

您可以通过在"body" 上添加调用zoom 函数来做到这一点，您可以这样做：

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 + ")");
}

Here is a Fiddle Example。使用滚轮进行缩放。