Предельные оси x и y в гистограмме с d3.js

Question

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

Рабочий приводится ниже

mainApp.directive('ngTest', function() { 
return { 
    restrict: 'AE', 
    scope: { 
     data: '=' 
      }, 
    link: function (scope, element) { 

     var margin = {top: 20, right: 30, bottom: 30, left: 60}, 
     width = 410 - margin.left - margin.right, 
     height = 230 - margin.top - margin.bottom; 

     var chart = d3.select(element[0]) 
        .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 + ")"); 

     var x = d3.scale.ordinal().rangeRoundBands([0, width], .1); 

     var tip = d3.tip() 
        .attr('class', 'd3-tip') 
        .offset([-10, 0]) 
        .html(function(d) { 
         return "<strong>Frequency:</strong> <span style='color:red'>" + d.value + "</span>"; 
         }); 

     chart.call(tip); 

     //Render graph based on 'data' 
     scope.render = function(data) { 

      var y = d3.scale.linear() 
        .range([height, 0]) 
        .domain(d3.extent(data, function(d) { return d.value; })) 
        .nice(); 

      var xAxis = d3.svg.axis().scale(x).orient("bottom"); 

      var yAxis = d3.svg.axis().scale(y).orient("left"); 

      x.domain(data.map(function(d) { return d.name; })); 

      //Redraw the axes 
      chart.selectAll('g.axis').remove(); 

      chart.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + (height) + ")") 
       .call(xAxis) 
       .selectAll("text") 
       .style("text-anchor", "end") 
       .attr("dx", "-.8em") 
       .attr("dy", ".15em") 
       .attr("transform", function(d) { 
        return "rotate(-20)"; 
        }); 

      chart.append("g") 
       .attr("class", "y axis") 
       .call(yAxis) 
       .append("text") 
       .attr("transform", "rotate(-90)") 
       .attr("y", 0-margin.left) 
       .attr("x",0-(height/2)) 
       .attr("dy", "1em") 
       .style("text-anchor", "middle") 
       .text("Value"); 

      chart.selectAll(".bar") 
        .data(data) 
        .enter().append("rect") 
        .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })  
        .attr("x", function(d) { return x(d.name); })     
        .attr("y", height) 
        .attr("height", 0) 
        .on('mouseover', tip.show) 
        .on('mouseout', tip.hide) 
        .transition().duration(2000) 
        .attr("y", function(d) {return y(Math.max(0, d.value)); }) 
        .attr("height", function(d) {return Math.abs(y(d.value) - y(0)); })  
        // .attr("width", x.rangeBand()); 
        .attr("width", Math.min.apply(null, [x.rangeBand()-2, 100])); 
      }; 

     scope.$watch('data', function() { 
      scope.render(scope.data); 
      }, true); 

    } 
    }; 
}); 

Рабочий пример приведен в следующем FIDDLE adderss http://jsfiddle.net/HB7LU/9000/

Answer 1

Использование клещей метод оси d3. Так как формат x оси x - это время, вы можете указать как число, так и формат тика.

var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(d3.time.day, 2); 

var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5); 

Вы можете обратиться больше о d3 оси от SVG here и о времени форматов от here