Клещи, не показанные для многострочной диаграммы d3 svg

Question

Я не могу получить мои тики, чтобы показать мой график на основе строки d3 svg на линии (маленькая строка, которая обычно отображается на осевых точках на x и ось у)

http://plnkr.co/edit/KvJHXM6bjSeEIsZUsXLk?p=preview

Я думаю, что, возможно, отсутствует возможность здесь

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .ticks(4) 
    .tickFormat(function(d) { 
    var mmdd = d.getMonth() + '/' + d.getDate(); 
    var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); 
    return mmdd + " "+ time; 

    }) 
    .tickSize(1) 
    .tickPadding(8); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .tickSize(1) 
    .ticks(6) 
    .orient("left") 
    .tickPadding(20); 

Я попытался изменить несколько «тик» параметры, но я не могу понять, почему мои клещи отсутствуют на обоих оси x и y.

Любая помощь или указатели оценивается.

Спасибо

Answer 1

.tickSize(1) вызывает ваши тиков быть слишком скрытой (слишком мало), поэтому удалить его, и настройка по умолчанию 6.

Если вам нужно сделать осевую линию (path) сам по себе тоньше (я думаю, именно поэтому вы использовали параметр tickSize), лучше стилизовать с помощью некоторого CSS, например

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000000; 
} 

я обычно предлагаю также с использованием shape-rendering: crispEdges; в CSS, но это на самом деле вызывает ось быть скрыты снова из-за вашего использования viewBox, который, кажется, портя дисплей немного здесь.

Кроме того, похоже, что вы рисуете каждую ось дважды - один раз в drawChart() и снова, когда вы cal; drawAxis() в конце drawChart. Я предлагаю удалить первый.