Question

我正在开发与角度Js集成的d3.js条形图。代码如下。

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/9060/

我有3个数据集，如下所示。

    $scope.myData = [
        {name: "01-12-2014",    value:  4984.6},
      {name: "02-12-2014",    value:  -109.45},
      {name: "03-12-2014",    value: 474},
      {name: "04-12-2014",   value: 391.07},
      {name: "05-12-2014",    value: 106.82},
      {name: "06-12-2014",     value: -5},
      {name: "07-12-2014",    value:  30},
      {name: "08-12-2014",    value:  9}
                                ];

$scope.myData = [
    {name: "01-12-2014",    value:  474},
  {name: "02-12-2014",    value:  391.07},
  {name: "03-12-2014",    value: 106.82},
  {name: "08-12-2014",    value:  9}
                            ]

应用上述数据集时，图形表现正常。

但该图表对于后续数据集的行为异常，其中包括额外的一个原始小于第二个最后一个数据集

 $scope.myData2 = [
    {name: "01-12-2014",    value:  474},
  {name: "02-12-2014",    value:  391.07},
  {name: "03-12-2014",    value: 106.82}
                            ];

由于我是d3.js的新手，我无法确定确切的问题。如果有人知道请帮帮我

Answer 1

您的问题源于您如何确定条形的高度：

.attr("height", function(d) {return Math.abs(y(d.value) - y(0)); })

在这里，您将高度设置为数据点的y值与y值之间的差值为0.但是，您的y比例从数据集中的最小值开始：

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

因此，y(0)有时可能是否定的。您只是没有注意到其他两个数据集，因为它们的最小值接近0。这是我如何设置高度：

.attr("height", function(d) {return Math.abs(y(d.value) - y(d3.min(y.domain()))) })

请参阅updated fiddle并在下方绘制。

enter image description here

在d3.js条形图中渲染问题

1 个答案: