d3의 간단한 가로 막 대형 차트 JS

Question

저는이 라이브러리를 처음 사용했기 때문에 사각형 막대에 음수 값이있는 이유를 모르겠습니다. 서버에서 svg를 렌더링하기 위해 jsdom과 함께 d3-node (d3 v4)를 사용하고 있습니다. 이 보인다

var data = [ 
{ 
    "name" : "Nom Prénom", 
    "value1" : 40, 
    "value2" : 100, 
    "value3" : 10, 
    "total" : 150 //a changer 
} 
]; 

var margin = {top: 20, right: 160, bottom: 35, left: 30}; 

var width = 960 - margin.left - margin.right, 
height = 500 - margin.top - margin.bottom; 


var svg = this.d3n 
     .createSVG(GRAPH_WIDTH - MARGINS.left - MARGINS.right - LEGEND_PANEL.width, GRAPH_HEIGHT - MARGINS.top - MARGINS.bottom) 
     .append('g'); 


var stack = d3.stack().keys(["value1","value2","value3"]).order(d3.stackOrderNone).offset(d3.stackOffsetNone); 

var dataSet = stack(data); 

    //set x, y and colors 

    var x = d3.scaleBand() 
     .range([0, width]); 

    var y = d3.scaleLinear() 
     .range([height, 0]); 

    var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"]; 


    //define and draw axis 
    var xAxis = d3.axisBottom(x); 
    var yAxis = d3.axisLeft(x).ticks(5).tickFormat(function(d){ return d;}); 

    svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis); 

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



// Create groups for each series, rects for each segment 
var groups = svg.selectAll("g.cost") 
    .data(dataSet) 
    .enter().append("g") 
    .attr("class", "cost") 
    .style("fill", function(d, i) { return colors[i]; }); 

var rect = groups.selectAll("rect") 
.data(function(d) { return d; }) 
.enter() 
.append("rect") 
.attr("x", function(d) { 
    return x(d[0]); 
}) 
.attr("y", function(d) { return y(d[0] + d[1]); }) 
.attr("height", function(d) { return y(d[0]); }) 
.attr("width", x.bandwidth()) 
.on("mouseover", function() { tooltip.style("display", null); }) 
.on("mouseout", function() { tooltip.style("display", "none"); }) 
.on("mousemove", function(d) { 
    var xPosition = d3.mouse(this)[0] - 15; 
    var yPosition = d3.mouse(this)[1] - 25; 
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")"); 
    tooltip.select("text").text(d.y); 
}); 

그리고 SVG는이

<svg xmlns="http://www.w3.org/2000/svg" width="360" height="250"><g><g class="y axis" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#000" d="M-6,0.5H0.5V770.5H-6"></path></g><g class="x axis" transform="translate(0,445)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5,6V0.5H770.5V6"></path></g><g class="cost" style="fill: b33040;"><rect y="-17355" height="445" width="770"></rect></g><g class="cost" style="fill: #d25c4d;"><rect y="-79655" height="-17355" width="770"></rect></g><g class="cost" style="fill: #f2b447;"><rect y="-128605" height="-61855" width="770"></rect></g></g></svg>

그것은 일부 V4 자습서를보고 좀 어려운 것 같습니다 :

이

내가 뭘하려 v3과 v4 사이에 많은 변화가있었습니다. 이것이 잘못된 부분을 설명해 주시겠습니까?

var width = 960 - margin.left - margin.right, 
height = 500 - margin.top - margin.bottom; 

우리에게 width = 770 및 height = 445을 제공합니다 : 높이와 폭에 약간의 문제가있는 것처럼

고마워요 모두의

Answer 1

먼저, 보인다. 그러나

.createSVG(GRAPH_WIDTH - MARGINS.left - MARGINS.right - LEGEND_PANEL.width, GRAPH_HEIGHT - MARGINS.top - MARGINS.bottom) 

은 <svg width="360" height="250">으로 끝납니다.

그런 다음, 당신은 당신의 y.scaleLinear 선언에가 없기 때문에 도메인 부분의 부정적인 height 및 y을 얻고 :

var y = d3.scaleLinear() 
     .range([height, 0]); 

그것은해야 뭔가처럼 : 변환

var y = d3.scaleLinear() 
     .domain([0, 150]) 
     .range([height, 0]) 

D3 scaleLinear() 반환 기능 데이터 차원의 모든 지점 (이 경우 [0, 150], 0 및 150 분 및 데이터의 가능한 최대 값)을 시각 좌표로 가져와 사용합니다. 그리기. 나는. [0, 150] -> [445, 0]을 매핑합니다.

더 나은 이해를 얻으려면 official ds-scale docs을 읽어 보시기 바랍니다. 또한 첫 번째 단락에는 세 가지 자습서가 언급되어 있습니다.

v3 자습서를 찾았더라도 읽는 것이 좋을 수도 있고 아이디어가 그대로 유지 될 수도 있습니다. the changelog page을 열어서 v4에서 동일한 코드를 작성하는 방법을 확인하십시오. 가장 큰 자습서 모음은 here입니다.