使用 d3.js 缩放条形图答案

【问题标题】：Zooming bar-graph with d3.js使用 d3.js 缩放条形图
【发布时间】：2012-06-22 23:34:24
【问题描述】：

我正在尝试创建一个带有时间刻度的条形图，可以放大任何时间段。我能够为我的 x 轴（时间刻度）创建缩放功能，但是我的数据（在本例中为矩形）不会随我的轴一起缩放。

这是我的图表的简化版本：http://jsfiddle.net/gorkem/Mf457/5/embedded/result/ 如您所见，我可以放大到我的 x 轴，但条形图不会随之放大。

这里是 jfiddle 链接：http://jsfiddle.net/gorkem/Mf457/6/

var y = d3.scale.linear().domain([0, max_val]).range([graph_height, 0]);
var x = d3.time.scale().domain([minDate, maxDate]).range([0, graph_width]);

var chart = d3.select(location).append("svg")
    .attr("class", "chart")
    .attr("width", graph_width+20)
    .attr("height", graph_height+20)
    .call(d3.behavior.zoom().x(x).scaleExtent([1, 8]).on("zoom", zoom));

var lines = chart.selectAll("line");

var lines_y = lines
    .data(x.ticks(5))
    .enter().append("line")
    .attr("x1", x)
    .attr("x2", x)
    .attr("y1", function (d) {return graph_height - 20 - d;})
    .attr("y2", graph_height)
    .style("stroke", "#ccc");

var lines_x = lines
        .data(y.ticks(10))
        .enter().append("line")
        .attr("x1", 0)
        .attr("x2", graph_width)
        .attr("y1",  y)
        .attr("y2",  y)
        .style("stroke", "#ccc");

xAxis = d3.svg.axis().scale(x);
yAxis = d3.svg.axis().scale(y).orient("left");

chart.append("svg:g")
    .attr("class", "xaxis")
    .attr("transform","translate(0,300)")
    .call(xAxis);
chart.append("svg:g")
    .attr("class", "yaxis")
    .attr("transform", "translate(25,0)")
    .call(yAxis);


var rect = chart.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", function (d,i) {return x(new Date(d["date"]))+20; })
    .attr("y", function (d,i) { return graph_height - (d["num"] *v_scale);})
    .attr("width", x(new Date(data[1]["date"])))
    .attr("height", function (d,i) {return d["num"]*v_scale;});

rect.call(d3.behavior.zoom().x(x).scaleExtent([1, 8]).on("zoom", zoom));

function zoom() {
    chart.select(".xaxis").call(xAxis);
    chart.select(".yaxis").call(yAxis);
}

}

我觉得我应该为我的缩放功能添加更多功能，以使该功能在条形（矩形）上有效。非常感谢任何帮助。

【问题讨论】：

标签： d3.js bar-chart zooming

【解决方案1】：

使用“selectAll”，我分别对每个条形应用了缩放和平移，将缩放和平移都限制在 x 轴上。

function zoom() {
    chart.select(".xaxis").call(xAxis);
    chart.select(".yaxis").call(yAxis);
    chart.selectAll(".chart rect").attr("transform", "translate(" + d3.event.translate[0] + ",0)scale(" + d3.event.scale + ", 1)");
}

这同样适用于单个路径元素，这是我在偶然发现您的问题时试图弄清楚的。

【讨论】：

链接好像坏了。

【解决方案2】：

我也想知道同样的事情，所以至少要知道你们相处得很好。这是我目前的方法。首先，我无法从您的代码中生成图表，并且链接不会将我发送到任何有用的东西——没有图表呈现。所以我无法帮助您解决具体问题。但是，这里有一个具有可缩放矩形的示例：http://bl.ocks.org/1962173。我目前正在检查它并删除不必要的元素，看看我是否可以让它工作。希望这会有所帮助！

【讨论】：