d3.js支持負值的條形圖

我正在使用d3.js和angular js指令在我們的應用程序中創建條形圖。我使用的代碼如下所示。這適用於正值。但它不顯示爲負值。我必須申請支持負值的chages。對於圖d3.js支持負值的條形圖

Html頁面

<cr-d3-bars data='myData'></cr-d3-bars>

如下圖所示

$scope.myData = [ 
          {name: 'AngularJS', count: 300}, 
          {name: 'D3.JS', count: 150}, 
          {name: 'jQuery', count:10000}, 
          {name: 'Backbone.js', count: 300}, 
          {name: 'Ember.js', count: 100}, 
          {name: 'hi.js', count: 300}, 
          {name: 'hl.js', count: -100} 
         ];

任何一個圖形

mainApp.directive('crD3Bars', function() { 
return { 
restrict: 'E', 
scope: { 
    data: '=' 
}, 
link: function (scope, element) { 
    var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 480 - margin.left - margin.right, 
    height = 360 - margin.top - margin.bottom; 
    var svg = 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 y = d3.scale.linear().range([height, 0]); 

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

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

    //Render graph based on 'data' 
    scope.render = function(data) { 
    //Set our scale's domains 
    x.domain(data.map(function(d) { return d.name; })); 
    y.domain([0, d3.max(data, function(d) { return d.count; })]); 

    //Redraw the axes 
    svg.selectAll('g.axis').remove(); 
    //X axis 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    //Y axis 
    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
     .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Count"); 

    var bars = svg.selectAll(".bar").data(data); 
    bars.enter() 
     .append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.name); }) 
     .attr("width", x.rangeBand()); 

    //Animate bars 
    bars 
     .transition() 
     .duration(1000) 
     .attr('height', function(d) { return height - y(d.count); }) 
     .attr("y", function(d) { return y(d.count); }); 
    };

我提供數據

JS文件已經解決，請與我分享

來源

2014-12-03 Pramil

你能不能讓你有什麼例子？在小提琴也許？這會讓你更容易幫助你。 – 2014-12-03 12:33:25

它不起作用 – 2014-12-03 12:56:18

可能的重複[條形圖與負值]（http://stackoverflow.com/questions/10127402/bar-chart-with-negative-values） – user1251007 2014-12-03 13:20:34

首先，你必須把Y域接受負值：

y.domain([d3.min(data,function(d){return d.count}), d3.max(data, function(d) { return d.count; })]);

然後，你必須與bars的y和height屬性發揮，以確保這些箱子位於正確的位置：

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

這裏是一個工作示例（在another answer使用）：http://jsfiddle.net/chrisJamesC/tNdJj/4/

來源

2014-12-03 13:06:51

d3.js支持負值的條形圖

回答

相關問題