Javascript 基于数据的d3.js条形图动态调整大小
我正在构建一组条形图,这些条形图将使用json数据动态更新 在某些情况下,x.domain值等于零或null,因此在这些情况下,我不想绘制矩形,而是希望调整图表的总体高度。但是,条形图是基于data.length绘制的,data.length可能包含9个数组值,但其中一些值为零,但在图形中呈现空白 我附上了正在发生的事情的图片。基本上有9个数据条目,其中只有一个实际包含正值,但仍在为所有9个点绘制条形图 这是我的密码:Javascript 基于数据的d3.js条形图动态调整大小,javascript,d3.js,Javascript,D3.js,我正在构建一组条形图,这些条形图将使用json数据动态更新 在某些情况下,x.domain值等于零或null,因此在这些情况下,我不想绘制矩形,而是希望调整图表的总体高度。但是,条形图是基于data.length绘制的,data.length可能包含9个数组值,但其中一些值为零,但在图形中呈现空白 我附上了正在发生的事情的图片。基本上有9个数据条目,其中只有一个实际包含正值,但仍在为所有9个点绘制条形图 这是我的密码: d3.json("data/sample.json", function(j
d3.json("data/sample.json", function(json) {
var data = json.cand;
var margin = {
top: 10,
right: 20,
bottom: 30,
left: 0
}, width = parseInt(d3.select('#graphic').style('width'), 10),
width = width - margin.left - margin.right -50,
bar_height = 55,
num_bars = (data.length),
bar_gap = 18,
height = ((bar_height + bar_gap) * num_bars);
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.ordinal()
.range([height, 0]);
var svg = d3.select('#graphic').append('svg')
.attr('width', width + margin['left'] + margin['right'])
.attr('height', height + margin['top'] + margin['bottom'])
.append('g')
.attr('transform', 'translate(' + margin['left'] + ',' + margin['top'] + ')');
var dx = width;
var dy = (height / data.length) + 8;
// set y domain
x.domain([0, d3.max(data, function(d) {
return d.receipts;
})]);
y.domain(0, d3.max(data.length))
.rangeBands([0, data.length * bar_height ]);
var xAxis = d3.svg.axis().scale(x).ticks(2)
.tickFormat(function(d) {
return '$' + formatValue(d);
});
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.ticks(0)
.tickFormat(function(d) {
return '';
});
// set height based on data
height = y.rangeExtent()[1] +12;
d3.select(svg.node().parentNode)
.style('height', (height + margin.top + margin.bottom) + 'px');
// bars
var bars = svg.selectAll(".bar")
.data (data, function (d) {
if (d.receipts >= 1) {
return ".bar";
} else {
return null;
}
})
.enter().append('g');
bars.append('rect')
.attr("x", function(d, i) {
return 0;
})
.attr("y", function(d, i) {
if (d.receipts >= 1) {
return i * (bar_height + bar_gap - 4);
}else {
return null;
}
})
.attr("width", function(d, i) {
if (d.receipts >= 1) {
return dx * d.receipts;
} else {
return 0;
}
});
//y and x axis
svg.append('g')
.attr('class', 'x axis bottom')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis.orient('bottom'));
svg.append('g')
.call(yAxis.orient('left'));
});
在将数据传递给D3之前,我会过滤数据并删除您不想绘制的项目。您建议如何操作?通过域?不,过滤数据本身。也就是说,从数据数组中删除所有不希望绘制的元素。