好的,所以我有以下代码(不要担心将它分成几部分):
var data = [{value: 1, label: 'Olaf'}, {value: 2, label: 'Marc'}, {value: 5, label: 'Stine'}, {
value: 1,
label: 'MC'
}, {value: 3, label: 'Louise'}, {value: 2, label: 'Jens'}];
var outerWidth = 500;
var outerHeight = 250;
var margin = { left: 130, top: 0, right: 0, bottom: 30 };
var barPadding = 0.2;
var xColumn = "value";
var yColumn = "label";
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
var svg = d3.select("#chartArea").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxisG = g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")");
var yAxisG = g.append("g")
.attr("class", "y axis");
var xScale = d3.scale.linear().range( [0, innerWidth]);
var yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.ticks(d3.max(data, function (d){ return d[xColumn]; })) // Use approximately 5 ticks marks.
.tickFormat(d3.format("s")) // Use intelligent abbreviations, e.g. 5M for 5 Million
.outerTickSize(0); // Turn off the marks at the end of the axis.
var yAxis = d3.svg.axis().scale(yScale).orient("left")
.outerTickSize(1); // Turn off the marks at the end of the axis.
function render(data){
xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
yScale.domain(data.map( function (d){ return d[yColumn]; }));
xAxisG.call(xAxis);
yAxisG.call(yAxis);
var bars = g.selectAll("rect").data(data);
bars.enter().append("rect")
.attr("height", yScale.rangeBand())
.attr('class', 'vertical_bar');
bars.transition();
bars
.attr("x", 0)
.attr("y", function (d){ return yScale(d[yColumn]); })
.attr("width", function (d){ return xScale(d[xColumn]); });
bars.exit().remove();
}
render(data);
setTimeout(function () {
var data = [{value: 4, label: 'Olaf'}, {value: 22, label: 'Marc'}, {value: 15, label: 'Stine'}, {
value: 13,
label: 'MC'
}, {value: 20, label: 'Louise'}, {value: 32, label: 'Jens'}];
render(data);
},5000);
现在在这段代码中我有一个渲染功能:
function render(data){
xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
yScale.domain(data.map( function (d){ return d[yColumn]; }));
xAxisG.call(xAxis);
yAxisG.call(yAxis);
var bars = g.selectAll("rect").data(data);
bars.enter().append("rect")
.attr("height", yScale.rangeBand())
.attr('class', 'vertical_bar')
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
bars.transition();
bars
.attr("x", 0)
.attr("y", function (d){ return yScale(d[yColumn]); })
.attr("width", function (d){ return xScale(d[xColumn]); });
bars.exit().remove();
}
您可以在选择rect
元素后看到,然后添加转换
然后在我的代码结尾处,我有以下内容:
render(data);
setTimeout(function () {
var data = [{value: 4, label: 'Olaf'}, {value: 22, label: 'Marc'}, {value: 15, label: 'Stine'}, {
value: 13,
label: 'MC'
}, {value: 20, label: 'Louise'}, {value: 32, label: 'Jens'}];
render(data);
},5000);
首先插入数据然后插入一些应该导致转换的新数据后5秒。可悲的是,没有过渡只有跳跃。
那我做错了什么?
我有小提琴:fiddle
答案 0 :(得分:1)
您是否需要将呼叫链接到transition()
?
bars
.transition()
.attr("x", 0)
.attr("y", function (d){ return yScale(d[yColumn]); })
.attr("width", function (d){ return xScale(d[xColumn]); });