我有一个大问题。
我使用d3来显示我的(民意调查)数据。 (所以问题和答案)除了一个问题外,它的工作正常。
有时它不会像现在这样可视化数据。例如,一次d3获得关于d3.json的所有正确数据。但图表不对。它应该在第一个栏中加载300个答案,但它只显示50.我测试了它并且json工作。 我试图过滤图表,我遇到了同样的问题。
这是我的d3代码。
<div>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {
top: 20,
right: 30,
bottom: 30,
left: 430
},
width = 1400 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var yScale = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(10);
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "chart");
var chart = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("getdata.php", function(error, data) {
xScale.domain(data.map(function(d) {
return d.text;
}));
yScale.domain([0, d3.max(data, function(d) {
return d.count;
})]);
chart.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return xScale(d.text);
})
.attr("y", function(d) {
return yScale(d.count);
})
.attr("height", function(d) {
return height - yScale(d.count);
})
.attr("width", xScale.rangeBand())
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Antworten");
});
function type(d) {
d.count = +d.text;
return d;
}
</script>
</div>
我想问题从这里开始。但我不知道为什么。问题不会出现在每个问题上。仅在少数时或当我尝试使用我的过滤器时。
当两个值有很大差异时,可能会发生这种情况吗?
更新: 这就像:D3不想失去最小的酒吧。所以其他的酒吧必须基于那个最小的。然后,对于较大的条形,值不正确。也许Y比例取决于最小的条形。