我创建了一个简单,可更新的d3.js条形图。 除了x轴,它工作正常。
当我从图表中删除条形时,不会删除相应的轴标签。
但是当我第二次移除条形时,第一次移动中移除的条形标签将从轴上移除。
这里发生了什么,为什么?
在此处查看有效的演示:http://jsfiddle.net/vACua/4/
js代码如下:
var BarChart = function (config) {
var data,
svg,
xScale,
yScale,
yAxis,
xAxis;
svg = d3.select('#' + config.targetElement).append('svg');
svg.attr("width", config.width + config.margin.left + config.margin.right)
.attr("height", config.height + config.margin.top + config.margin.bottom)
.attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")");
xScale = d3.scale.ordinal();
yScale = d3.scale.linear();
xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(-config.height, 0).tickPadding(6);
svg.append('g').classed('x-axis-group axis', true);
svg.append("g")
.classed("x axis", true)
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// All methods and members defined here are public
return {
setData: function (newData) {
data = newData;
this.updateChart();
},
updateChart: function () {
var xDomain = data.map(function (d) {
return d.name;
}),
yDomain = data.map(function (d) {
return d.value;
});
xScale.domain(xDomain)
.rangeRoundBands([config.margin.left, config.width], 0.05);
yScale.domain([0, d3.max(data, function (d) {
return d.value;
})])
.range([config.height, 0]);
xAxis.scale(xScale)
.orient("bottom")
.tickSize(-config.height, 0)
.tickPadding(6);
var dataSections = svg.selectAll("g.bar")
.data(data, function (d) {
return d.name;
});
// adding new bars
dataSections.enter()
.append('g')
.attr('class', 'bar')
.append("rect")
.attr("height", 0);
var transition = svg.transition().duration(750);
transition.selectAll("g.bar").select('rect')
.attr("x", function (d, i) {
return xScale(d.name);
})
.attr("y", function (d) {
return yScale(d.value);
})
.attr("width", xScale.rangeBand())
.attr("height", function (d) {
return height - yScale(d.value);
});
dataSections.exit().transition().remove();
svg.select('.x.axis')
.transition()
.duration(500)
.attr({
transform: 'translate(0,' + (config.height) + ')'
})
.call(xAxis);
}
};
};
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
amount = 15;
function init() {
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 400 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var chart = BarChart({
targetElement: 'foo',
margin: margin,
width: width,
height: height
});
setRandomData = function () {
var data = [];
for (var i = 0; i <= amount; i++) {
data.push({
name: "a" + i,
value: Math.floor((Math.random() * 300) + 1)
});
}
amount = amount - 5;
chart.setData(data);
}
}
init();
setRandomData();
setTimeout(setRandomData, 2000);
setTimeout(setRandomData, 4000);
答案 0 :(得分:1)
好的,我完全不知道为什么要搬家
svg.select('.x.axis')
.transition()
.duration(500)
.attr({transform: 'translate(0,' + (config.height) + ')'})
.call(xAxis);
在此之前:
var transition = svg.transition().duration(750);
似乎按照您的预期方式运作:http://jsfiddle.net/Y274x/