Question

我正在使用与角度js集成的d3.js开发条形图。我是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);

    }
  };
});

以下小提琴加法器中给出了工作示例 http://jsfiddle.net/HB7LU/9000/

Answer 1

使用d3轴的ticks方法。由于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);

您可以参考here中有关d3 svg轴的更多信息以及here

中的时间格式

使用d3.js限制条形图中的x和y轴刻度

1 个答案: