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の間に多くの変更があります。これが間違っている部分を説明してください。高さと幅を持ついくつかの問題があるよう

おかげで、すべての多く

Answer 1

まず、なります

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

は私たちにwidth = 770とheight = 445を与えます。しかし、

.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をお読みください。 3つのチュートリアルも最初の段落で言及されています。

v3チュートリアルを見つけたとしても、それを読む価値はありますが、アイデアは変わりません。the changelog pageを開いたままにして、v4で同じコードを書く方法を確認してください。チュートリアルの最大のコレクションはhereです。