javascript - D3 图形缺少与轴中刻度一样多的文本元素

Question

我遇到了最奇怪的问题:

• 如果我在图表之前 绘制坐标轴，则图表丢失的文本元素与坐标轴中的刻度一样多。当我增加或减少刻度数时，缺少的文本元素的数量也会增加或减少。

• 如果我在图表之后绘制坐标轴，一切都很好。

• 我想先画轴，因为我希望网格线显示在图形下方。 首先，我想了解这里发生了什么。

这里是有问题的代码片段:

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); 
*/
};

Answer 1

我的预感:

取而代之的是:

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 仅添加到标签而不是刻度文本，因此问题应该解决。