使用d3.js缩放条形图 [英] Zooming bar-graph with d3.js

问题描述

我试图创建一个时间尺度的条形图，其中可以放大任何时间段。我能够为我的x轴（时间刻度）创建缩放功能，但我的数据（在这种情况下，rects）不随我的轴放大。

I am trying to create a bar graph with a time scale where its possible to zoom into any time period. I was able to create the zooming functionality for my x-axis(time scale) however my data (in this case rects) doesn't zoom along with my axis.

这是我的图表的简化版本： http://jsfiddle.net/gorkem/Mf457/5/embedded/result/
正如你可以看到，我可以放大到我的x轴，但酒吧不缩放

Here is a simplified version of my graph: http://jsfiddle.net/gorkem/Mf457/5/embedded/result/ As you can see I can zoom in to my x-axis but the bars do not zoom along.

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

and here is the jfiddle link: 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);
}

}

我觉得我应该添加更多的功能到我的缩放功能，使功能在酒吧（矩形）有效。

I feel like I should be adding more functionality to my zoom function for the function to be effective on bars(rects). I would really appreciate any help.

推荐答案

使用selectAll，我已经分别应用缩放和翻译到每个条，将尺度和平移仅限于x轴。

Using 'selectAll', I've applied the scaling and translation to each bar respectively, restricting both scale and translation to the x-axis only.

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

您可以看到它在这里工作 http://jsfiddle.net/nverba/Mf457/11/

You can see it working here http://jsfiddle.net/nverba/Mf457/11/

这与单个路径元素同样好，这是我想要弄清楚当我偶然发现你的问题。

This works equally well with a single path element, which is what I was trying to figure out when I stumbled upon your question.

这篇关于使用d3.js缩放条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！