Ось D3 должна быть добавлена ​​отдельно?

Question

В this axis label example, который использует D3 v4, он добавляет ось x и текстовую метку в виде отдельных узлов в svg.

// Add the x Axis 
    svg.append("g") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)); 

    // text label for the x axis 
    svg.append("text")    
     .attr("transform", 
      "translate(" + (width/2) + " ," + 
          (height + margin.top + 20) + ")") 
     .style("text-anchor", "middle") 
     .text("Date"); 

Когда цепь код, указанный выше (следовательно, перемещая текстовый элемент под группы оси х):

// Add the x Axis 
    svg.append("g") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)) 
     .append("text")    
     .style("text-anchor", "middle") 
     .text("Date"); 

Тогда мое название оси не видно больше (см скриншот ниже). Я все еще могу найти свой текстовый элемент в DOM под группой осей x, но его нет в визуализированном HTML.

Я хочу знать:

1. ли дизайн, что D3 хочет меня, чтобы добавить ось и этикетку отдельно (то есть, не цепочки)?

2. Почему мой текстовый элемент не отображается после перемещения его под группу осей x?

Answer 1

ось D3 этикетка должна быть добавлена ​​отдельно?

Нет, это не так. You может цепь, это не проблема. Проблема здесь в том, что текстовый элемент fill.

Как вы можете видеть на скриншоте, который вы связали, группа контейнеров имеет «none» как fill. Так как текст наследует родительские атрибуты/стили, вам придется изменить свою fill от «нет» на любой цвет, который вы хотите:

var svg = d3.select("svg"); 
 

 
var xScale = d3.scaleLinear() 
 
    .domain([1, 10]) 
 
    .range([10,390]); 
 

 
var xAxis = d3.axisBottom(xScale); 
 

 
var gX = svg.append("g") 
 
    .attr('class', 'axis') 
 
    .attr("transform","translate(0,40)") 
 
    .call(xAxis) 
 
    .append("text") 
 
    .attr("fill", "black")//set the fill here 
 
    .attr("transform","translate(120, 40)") 
 
    .text("Hello World!!!");

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg width="400" height="80"></svg>

PS: эта проблема не будет происходить в D3 v3.x.