d3.js를 사용하여 정수형 막대 그래프 서식 지정

Question

d3.js를 사용하여 막대 그래프를 개발했습니다. 개발 된 막대 그래프는 바이올린에 포함되어 있습니다. 저는 d3.js에 익숙하지 않습니다. 그래서 그래프 서식 지정에 어려움이 있습니다. 나는 그래프를 아래의 그래프보다 더 포맷하고 싶다.

내가 경험 한 주된 문제는 그래프가 -ve 옆에 -ve 정수를 표시하지 않고 y 축에 플롯된다는 것입니다. 예) 플롯 된 값은 -490이고, 현재 그래프는 y 축에 -500을 표시하지 않습니다. 이 문제도 + 종료되고 하나가 저를 도와주세요 알고있는 경우 코드는

var mainApp = angular.module('mainApp', []); 

mainApp.controller('FIItradingController', 
        ['$scope', function($scope) { 
var data = [ 
    {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: -12.36}, 
    {name: "07-12-2014", value: 10}, 
    {name: "08-12-2014", value: 20} 
]; 

var data1 = [4, 8, 15, 16, 23, 42]; 

    var margin = {top: 20, right: 30, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

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");      

/*var x = d3.scale.linear() 
    .range([0, width]);*/ 

/*var chart = d3.select(".chart") 
    .attr("width", width);*/ 

/*var x = d3.scale.linear() 
    .domain([0, d3.max(data)]) 
    .range([0, width]);*/ 

var chart = d3.select(".chart") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");      

$scope.render = function(data) { 

    /*var chart = d3.select(".chart") 
    .attr("width", width) 
    .attr("height", barHeight * data.length);*/ 

    /*bar.append("rect") 
    .attr("width", x) 
    .attr("height", barHeight - 1); 

    bar.append("rect") 
     .attr("width", function(d) { return x(d.value); }) 
     .attr("height", barHeight - 1); 

     bar.append("text") 
     .attr("x", function(d) { return x(d.value) - 3; }) 
     .attr("y", barHeight/2) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.value; }); 

      x.domain([0, d3.max(data, function(d) { return d.value; })]); 
    chart.attr("height", barHeight * data.length); 

    */ 
    x.domain(data.map(function(d) { return d.name; })); 
    //y.domain([0, d3.max(data, function(d) { return d.value; })]); 

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

    chart.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + (height) + ")") 
     .call(xAxis); 

    chart.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("Frequency"); 

/*chart.selectAll(".bar") 
     .data(data) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.name); }) 
     .attr("y", function(d) { return y(d.value); }) 
     .attr("height", function(d) { return height - y(d.value); }) 
     .attr("width", x.rangeBand());*/ 

    chart.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; }) 
    .attr("y", function(d) {return y(Math.max(0, d.value)); }) 
    .attr("x", function(d) { return x(d.name); }) 
    .attr("height", function(d) {return Math.abs(y(d.value) - y(0)); }) 
    .attr("width", x.rangeBand()); 

} 
function type(d) { 
    d.value = +d.value; // coerce to number 
    return d; 
} 
$scope.render(data); 

        }]); 

아래에 주어진 값

을했습니다. 바이올린을 보여주는 플롯 입니다,

http://jsfiddle.net/HB7LU/8960/

그래서

Answer 1

아래에 주어진 음의 값 - 그것은 차트 영역 아래로 내려 것처럼 보이는 것을 그냥 때문에 가장 낮은 지점 y 축은 차트가 끝나는 곳입니다.

d3.min()의 출력에 약간의 여유 공간을주기 위해 곱하는 것과 같은 여러 가지 방법이 있지만, 가장 쉽고 우아한 방법은 바로 y 축척에 .nice()을 추가하는 것입니다. :

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

또한 d3.extent() 대신 d3.min() 및 d3.max()를 사용하는 것이 좋습니다. minimum and maximum values in an array의 두 값 배열을 반환합니다. 그리고 나는 체인 .domain()과 .nice()을 그 정의 직후 y에 놓을 것입니다; 40 라인 후에 선언 할 필요는 없습니다. 이제 우리는 이것을 가지고 있습니다 :

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

Forked fiddle.