новеньких D3.js и проклятых, что кривая обучения ....D3.js не выравнивание значений столбцов вдоль оси у соответственно
Ниже приведен график, как это стоять, когда моя страница загружаются с исходные статические данные. Как видно из рисунка, столбцы последовательно поднимаются слева направо, как следует.
У меня есть код D3 помещается внутри зрения Backbone. Цель этой программы - изменить значения на заданный интервал. Когда меняются значения, я хочу использовать аспект D3 transform для анимации столбца, перемещающегося вверх или вниз в зависимости от числа.
Однако я бы хотел, чтобы все они двигались вверх и вниз на основе заданной оси y, которая применяется к каждому столбцу. Кажется, вместо этого каждый столбец перемещает числа вверх и вниз на основе другой оси y, и это изменяется в каждом столбце с каждой итерацией. Например, столбец со значением 115311 может завершить движение вниз, если генерируется значение 188000, а затем снова для значения 112000.
Например, здесь столбцы после второй итерации чисел создана (также отметить, что rect элементы, которые служат в качестве колонок не перерисованы. Если у кого есть какие-либо идеи, почему это происходит, а это было бы весьма признателен)
Модель
var DataPoint = Backbone.Model.extend({
initialize: function (lbl, ctrct, rtrn) {
this.set({
label: lbl,
contract: ctrct,
annReturn: rtrn
})
},
randomize: function() {
this.set({
contract: (Math.random() * (140000 - 100000 + 1) + 100000).toFixed(2)
});
}
});
Коллекция
var DataSeries = Backbone.Collection.extend({
model: DataPoint,
fetch: function() {
this.reset();
this.add([
new DataPoint("1/7yrs", "111830.17", "1.63%"),
new DataPoint("2/7yrs", "115311.17", "2.07%"),
new DataPoint("3/7yrs", "118984.65", "2.52%"),
new DataPoint("4/7yrs", "122859.65", "2.98%"),
new DataPoint("5/7yrs", "126947.77", "3.46%"),
new DataPoint("6/7yrs", "131260.74", "3.94%"),
new DataPoint("7/7yrs", "135810.92", "4.44%")
])
},
randomize: function() {
this.each(function (m) {
m.randomize();
});
}
});
Посмотреть
var BarGraph = Backbone.View.extend({
"el": "#graph",
options: {barDemo: ""},
initialize: function (options) {
_.bindAll(this, "render", "frame");
this.collection.bind("change", this.render);
this.options.barDemo = d3.selectAll($(this.el)).append("svg:svg")
.attr("width", width)
.attr("height", height + 60);
this.collection.fetch();
},
render: function() {
var data = this.collection.models;
var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
var y = d3.scale.linear().domain([0, d3.max(data, function (d) {
console.log(d);
console.log();
return d.attributes.contract
})])
.rangeRound([0, height]);
this.options.barDemo.selectAll("rect")
.data(data)
.enter()
.append("svg:rect")
.attr("x", function (d, i) {
//console.log(x(i));
return x(i);
})
.attr("y", function (d) {
//console.log(height - y(d.attributes.contract));
return height - y(d.attributes.contract);
})
.attr("height", function (d) {
console.log(y(d.attributes.contract));
return y(d.attributes.contract);
})
.attr("width", barWidth)
.attr("fill", "#2d578b");
this.options.barDemo.selectAll("text")
.data(data)
.enter()
.append("svg:text")
.attr("x", function (d, i) {
//console.log(x(i) + barWidth);
return x(i) + barWidth;
})
.attr("y", function (d) {
return height - y(d.attributes.contract);
})
.attr("dx", -barWidth/2)
.attr("dy", "1.2em")
.attr("text-anchor", "middle")
.text(function(d) {
//console.log(d.contract);
return d.attributes.contract
})
.attr("fill", "white");
this.options.barDemo.selectAll("text.yAxis")
.data(data)
.enter().append("svg:text")
.attr("x", function (d, i) { return x(i) + barWidth; })
.attr("y", height)
.attr("dx", -barWidth/2)
.attr("dy", "15px")
.attr("text-anchor", "middle")
.attr("style", "font-size: 12; font-family; Helvetica, sans-serif")
.text(function (d) { return d.label; })
.attr("transform", "translate(0, 18)")
.attr("class", "yAxis");
var rect = this.options.barDemo.selectAll("rect").data(data, function (d, i) { return i; });
rect.enter().insert("rect", "text").attr("x", function (d, i) {
return x(i);
}).attr("height", function (d) {
return x(d.attributes.contract);
}).attr("width", barWidth);
rect.transition().duration(1000).attr("height", function (d) {
return x(d.attributes.contract);
}).attr("width", barWidth);
rect.exit().remove();
var text = this.options.barDemo.selectAll("text").data(data, function (d, i) {
return i;
});
text.enter().append("text")
.attr("x", function (d, i) { return x(i) + barWidth; })
.attr("y", function (d) { return height - y(d.attributes.contract); })
.attr("dx", -barWidth/2)
.attr("dy", "1.2em")
.attr("text-anchor", "middle")
.text(function (d) { return d.attributes.contract })
.attr("fill", "white");
text
.transition()
.duration(1100)
.attr("y", function (d) {
return y(d.attributes.contract);
})
.text(function (d) { return d.attributes.contract; });
},
frame: function() {
//this.chart.append("line").attr("y1", 0).attr("y2", h - 10).style("stroke", "#000");
//this.chart.append("line").attr("x1", 0).attr("x2", w).attr("y1", h - 10).attr("y2", h - 10).style("stroke", "#000");
}
});
код запуска
$(function() {
var dataSeries = new DataSeries();
new BarGraph({
collection: dataSeries
}).render();
setInterval(function() {
dataSeries.randomize();
}, 2000);
});
fyi вторая колонка # выше первой. –
Исправлено, спасибо;) – NealR
этот вопрос очень простой d3 как сделать диаграмму. Я рекомендую соответствующий учебник: http://bost.ocks.org/mike/bar/ посмотреть на три маленьких круга для шаблонов обновлений. –