Масштабирование гистограммы с помощью d3.Яш
Я пытаюсь создать гистограмму с временной шкалой, где ее можно увеличить в любой период времени. Я смог создать функцию масштабирования для моей оси x (временной шкалы), однако мои данные (в данном случае rects) не масштабируются вместе с моей осью.
вот упрощенная версия моего графика: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);
}
}
Я чувствую, что должен добавить больше функциональности в мою функцию масштабирования, чтобы функция была эффективной на барах(rects). Я бы очень признателен за любую помощь.
2 ответов
используя '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)");
}
это одинаково хорошо работает с одним элементом пути, который я пытался выяснить, когда наткнулся на ваш вопрос.
Мне интересно то же самое, так что, по крайней мере, знайте, что вы в хорошей компании. Вот мой нынешний подход. Во-первых, я не могу сгенерировать сюжет из вашего кода, и ссылки не посылают меня ни к чему полезному-никаких графиков. Поэтому я не могу помочь с вашей конкретной проблемой. Однако есть пример, который имеет масштабируемые прямоугольники здесь:http://bl.ocks.org/1962173. В настоящее время я просматриваю его и удаляю ненужные элементы и вижу, могу ли я заставить его работать. Надеюсь, это помогает!