D3.js 添加轴会消耗我的数据
我正在学习D3教程,但是添加轴会使我的一半数据消失,我不明白为什么。我认为可能轴占用了数据的空间,所以我在transform属性中添加了一个额外的10px,但这没有任何区别D3.js 添加轴会消耗我的数据,d3.js,D3.js,我正在学习D3教程,但是添加轴会使我的一半数据消失,我不明白为什么。我认为可能轴占用了数据的空间,所以我在transform属性中添加了一个额外的10px,但这没有任何区别 var GIST = "https://gist.githubusercontent.com/charisseysabel/f8f48fbf11b8a1b0d62cbe2d6bdc2aa6/raw/2ead1537adb822fbd59a666afd5334d525480a13/nano-2017.tsv" var wid
var GIST = "https://gist.githubusercontent.com/charisseysabel/f8f48fbf11b8a1b0d62cbe2d6bdc2aa6/raw/2ead1537adb822fbd59a666afd5334d525480a13/nano-2017.tsv"
var width = 1000,
height = 550,
margin = {top: 20, right: 30, bottom: 30, left: 4};
var y = d3.scaleLinear()
.range([height, 0]);
var yScale = d3.scaleLinear()
.range([height, 0]);
var xScale = d3.scaleLinear()
.range([0, width]);
var xAxis = d3.axisLeft(yScale);
var yAxis = d3.axisBottom(xScale);
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", height);
chart.append("g")
.attr("transform", "translate(10, 0)")
.call(xAxis);
chart.append("g")
.attr("transform", "translate(0, 540)")
.call(yAxis);
d3.tsv(GIST, type, function(error, data) {
y.domain([0, d3.max(data, function(d) { return d.value; })]);
var barWidth = width / data.length;
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) {
return "translate(" + ((i * barWidth) + 10) + ",0)"; }
);
bar.append("rect")
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.attr("width", barWidth - 1);
bar.append("text")
.attr("x", (barWidth / 2) - 2)
.attr("y", function(d) { return y(d.value) + 3; })
.attr("dy", ".75em")
.text(function(d) { return d.value; });
});
function type(d) {
d.value = +d.value;
return d;
}
当你这么做的时候
var bar = chart.selectAll("g").etc...
。。。您正在选择SVG中已经存在的组元素(即轴),并将数据绑定到它们
有两种简单的解决方案:
d3.tsv
的底部,也就是说,在附加了条之后
var bar=chart.selectAll(null).etc
。要了解更多有关选择all(null)
背后的逻辑,请查看示例要点显示了Gerardo的两项建议的实际效果:。仅将Axis代码移到底部对我来说是不行的,但将上述两个建议结合起来是可行的。对不起,当我说“脚本的底部”时,我实际上指的是
d3.tsv
的底部,它是异步的。如果某些代码位于代码段的底部,但在d3.tsv
之外,则它将在d3.tsv
内的代码之前执行。请看这里,第一个建议单独起作用:。我将编辑答案以使其更清楚。