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

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

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

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);

источник

2017-01-11 Hangon

Извините, я неправильно понял ваш вопрос. Проблема в том, что ось 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;})

источник

2017-01-12 01:39:27

Я не верю, что его сетка производит линию вверху. В своем коде он использует только ось x в виде сетки с длиной галочки 'height'. Это создаст только вертикальные элементы сетки, которые вы видите в его сюжете. Хотя использование оси является чем-то вроде взлома, на самом деле это очень хороший способ реализовать сетки, поскольку они очень просты в масштабировании и работают при использовании средств масштабирования и панорамирования, поскольку вы можете легко их модифицировать с помощью 'd3.event.transform '. Даже Майк Босток регулярно использует этот подход для рисования сетки. – HamsterHuey

Я только что запустил код, а часть сетки создала линию вверху. Я уверен, что Босток делает это так, чтобы путь в форме скобы в конце оси отображался под фактической осью. Когда вы используете .call (ось), он создает 4 элемента, путь в форме скобок, группу для каждого тика, тики линий и текст для каждого тика. –

Чтобы отслеживать, вы заметите, что линии сетки в прикрепленном изображении имеют ту же серое, что и линия, с которой @Hangon пытается избавиться. –

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

источник

2017-01-11 23:46:39 HamsterHuey

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

ответ

Смежные вопросы