Как изменить линию оси X сверху вниз в d3.js

Question

Я новичок в d3.js, и я еще не мог понять, почему моя ось X-оси размещена сверху, а не внизу (пожалуйста, снизу ниже).

Вот код, я использую (упрощена, чтобы уменьшить количество кода):

var data = []; 
var days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; 
for(var i = 0; i<7; i++){ 
    data.push({"letter":i,"frequency":Math.random(), "day":days[i]}) 
} 



var svg = d3.select("#graph1"), 
    margin = {top: 80, right: 20, bottom: 100, left: 100}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom; 


var x = d3.scaleLinear().rangeRound([0, width]), 
    y = d3.scaleBand().rangeRound([0, height]); 

var g = svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    x.domain([0,1]); 
    y.domain(data.map(function(d) { return d.day; })); 

    g.append("g") 
     .attr("class", "axis axis--x") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x).ticks(5, "%")); 

    g.append("g") 
     .attr("class", "axis axis--y") 
     .call(d3.axisLeft(y)) 
     .append("text") 
     .attr("transform", "rotate(-90)") 
     //.attr("y", 6) 
     //.attr("dy", "0.71em") 
     //.attr("text-anchor", "end"); 



     //setup the tool 

    g.append("g")   
    .attr("class", "grid") 
    /*.attr("transform", "translate("+margin.left+"," + margin.top + ")")*/ 
    .call(d3.axisBottom(x) 
     .ticks(5) 
     .tickSize(height) 
     .tickFormat("") 
     ); 



var thickness = 14; 
g.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", 0) 
    .attr("y", function(d) { return y(d.day) + thickness/2 ;}) 
    .attr("width", function(d) { return x(d.frequency);}) 
    .attr("height", thickness); 

Answer 1

Извините, я неправильно понял ваш вопрос. Проблема в том, что ось d3 автоматически создает путь, который соединяет внешние 2 тика и ось. В вашем случае вы использовали ось d3 для создания ваших сеток. Я бы предположил, что этот путь покрывает вашу линию осей внизу. Чтобы проверить, что это так, я бы рекомендовал проверить ваш DOM с помощью инструментов разработчика вашего браузера.

В любом случае проблема заключается в том, что вместо того, чтобы использовать d3-ось для создания ваших сеток, вы должны создать путь для каждой линии сетки. То, как вы создали сетку, - это взлом, и именно поэтому вы видите линию вверху. Поэтому я хотел бы избавиться:

g.append("g")   
    .attr("class", "grid") 
    .call(d3.axisBottom(x) 
     .ticks(5) 
     .tickSize(height) 
     .tickFormat("")); 

Для следующего:

var grid = g.append("g").attr("class","grid"); 
grid.selectAll("path") 
    .data(x.ticks(5)) 
    .enter().append("path") 
    .attr("d", function(d) {return "M"+x(d)+",0v"+height;}); 

Быстрого Объяснения

Это создает массив значений клеща, например, [0,20,40, ...]:

x.ticks(5) 

Остальная часть коды присоединяя путь к .grid группы для каждого значения клеща, а затем, наконец, этот код является определяющей формой на пути в качестве вертикальная линия, начинающаяся сверху и идущая вниз к нижней части диаграммы.

.attr("d", function(d) {return "M"+x(d)+",0v"+height;}) 

Answer 2

Вы уверены, что линия в верхней части на самом деле от оси х ? Мне кажется, что путь для вашей оси x отключен (возможно, через CSS). Скорее всего, если вы скопировали в другие примеры, так как многие люди отключили путь оси в своих диаграммах). Единственная тайна - это то, где верхняя серая линия исходит ... возможно, какой-то стиль CSS для элемента svg? Было бы полезно разместить JSFiddle или plunker, если у вас по-прежнему возникают проблемы с устранением проблемы.