我遇到了最奇怪的问题:
- 如果我在图表之前 绘制坐标轴,则图表丢失的文本元素与坐标轴中的刻度一样多。当我增加或减少刻度数时,缺少的文本元素的数量也会增加或减少。
- 如果我在图表之后绘制坐标轴,一切都很好。
- 我想先画轴,因为我希望网格线显示在图形下方。 首先,我想了解这里发生了什么。
这里是有问题的代码片段:
var generateVisualization = function() {
var margin = {top: 30, right: 10, bottom: 30, left: 10};
var width = 1000 - margin.left - margin.right;
var height = (dataset.length * 11) + 5;
var xScale = d3.scale.linear()
.domain([1850, 2020])
.range([0, width])
var xAxisBottom = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(-height)
.tickFormat(d3.format("d")); // removes the comma as thousands separator
var svg = d3.select("body").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 + ")")
// Axis drawn first
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxisBottom);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(d.BeginDate);
})
.attr("y", function(d, i) {
return i * 11 + 3;
})
.attr("width", function(d, i) {
return xScale(d.EndDate) - xScale(d.BeginDate);
})
.attr("height", 4)
.attr("class", "line");
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d.DisplayName;
})
.attr("x", function(d, i) {
return xScale(d.BeginDate) + (xScale(d.EndDate) - xScale(d.BeginDate)) + 4;
})
.attr("y", function(d, i) {
return i * 11 + 8;
})
.attr("font-family", "sans-serif")
.attr("font-size", 8);
// Alternative: Axis drawn last
/*
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxisBottom);
*/
};
最佳答案
我的预感:
取而代之的是:
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d.DisplayName;
})
这样做:
svg.selectAll(".myLabel")//selection via class
.data(dataset)
.enter()
.append("text")
.attr("class", "myLabel")//adding a class to the label
.text(function(d) {
return d.DisplayName;
})
原因:当你这样做的时候
svg.selectAll("文本")
它将选择刻度上的文本,并将数据绑定(bind)到它。这就是异常的原因......你增加标签显示的刻度减少。
上述解决方案将类 myLabel
仅添加到标签而不是刻度文本,因此问题应该解决。
关于javascript - D3 图形缺少与轴中刻度一样多的文本元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37917819/