D3バージョン4 AXIS

Question

折れ線グラフの軸が見えない理由を知っていますか？

これはチャートへのリンクです：https://d3responsive.firebaseapp.com/responsive.html

そして、これは、JavaScriptのコードです：

/* D3-v4 curve interpolation comparison: https://bl.ocks.org/d3noob/ced1b9b18bd8192d2c898884033b5529 */ 

var dataline1 = [ 
{"mes":1, "impuestoPorcentaje":20}, 
{"mes":2, "impuestoPorcentaje":14}, 
{"mes":3, "impuestoPorcentaje":20}, 
{"mes":4, "impuestoPorcentaje":21}, 
{"mes":5, "impuestoPorcentaje":15}, 
{"mes":6, "impuestoPorcentaje":22}, 
{"mes":7, "impuestoPorcentaje":9}, 
{"mes":8, "impuestoPorcentaje":6}, 
{"mes":9, "impuestoPorcentaje":23}, 
{"mes":10, "impuestoPorcentaje":7}, 
{"mes":11, "impuestoPorcentaje": 40}, 
{"mes":12, "impuestoPorcentaje": 45} 
]; 

var dataline2 = [ 
{"mes":1, "impuestoPorcentaje":14}, 
{"mes":2, "impuestoPorcentaje":19}, 
{"mes":3, "impuestoPorcentaje":24}, 
{"mes":4, "impuestoPorcentaje":24}, 
{"mes":5, "impuestoPorcentaje":24}, 
{"mes":6, "impuestoPorcentaje":27}, 
{"mes":7, "impuestoPorcentaje":32}, 
{"mes":8, "impuestoPorcentaje":38}, 
{"mes":9, "impuestoPorcentaje":11}, 
{"mes":10, "impuestoPorcentaje":25}, 
{"mes":11, "impuestoPorcentaje": 40}, 
{"mes":12, "impuestoPorcentaje": 45} 
]; 

var wl = 550; 
var hl = 450; 

var svgl = d3.select("body").append("svg") 
    .attrs({ 
     width: wl, 
     height: hl 
    }); 

// Domain and ranges 

var xscalel1 = d3.scaleLinear() 
    .domain([0, d3.max(dataline1, function(d) { 
     return d.mes; 
    })]) 
    .range([0, wl - 30]); 

var yscalel1 = d3.scaleLinear() 
    .domain([0, d3.max(dataline1, function(d) { 
     return d.impuestoPorcentaje; 
    })]) 
    .range([hl - 30, 15]); 

var xscalel2 = d3.scaleLinear() 
    .domain([0, d3.max(dataline2, function(d) { 
     return d.mes; 
    })]) 
    .range([0, wl - 30]); 

var yscalel2 = d3.scaleLinear() 
    .domain([0, d3.max(dataline2, function(d) { 
     return d.impuestoPorcentaje; 
    })]) 
    .range([hl - 30, 15]); 

// Lines 

var lineOne = d3.line() 
    .x(function(d) { 
     return xscalel1(d.mes); 
    }) 
    .y(function(d) { 
     return yscalel1(d.impuestoPorcentaje); 
    }) 
    .curve(d3.curveLinear); 

var lineTwo = d3.line() 
    .x(function(d) { 
     return xscalel2(d.mes); 
    }) 
    .y(function(d) { 
     return yscalel2(d.impuestoPorcentaje); 
    }) 
    .curve(d3.curveMonotoneX); 

var vis = svgl.append("path") 
    .attrs({ 

     d: lineOne(dataline1), 
     "stroke": "#008080", 
     "stroke-width": 2, 
     "fill": "none" 

    }); 

var vis2 = svgl.append("path") 
    .attrs({ 
     d: lineTwo(dataline2), 
     "stroke": "orange", 
     "stroke-width": 2, 
     "fill": "none" 
    }); 

// Add the x Axis 
svgl.append("g") 
    .attr("transform", "translate(0," + hl + ")") 
    .call(d3.axisBottom(xscalel1)); 

// Add the y Axis 
svgl.append("g") 
    .call(d3.axisLeft(yscalel1)); 

Answer 1

あなたはすべての方法ダウンSVGの高さに軸を翻訳しています。いくらか余裕を残す必要があります。例えば

、これは（私はあなたのドメインを簡素化しています）今、あなたのコードです：何もちょうど空白、「実行コードスニペット」をクリックした後、表示されません

var wl = 550; 
 
var hl = 150; 
 
var svgl = d3.select("body").append("svg") 
 
    .attr("width", wl) 
 
    .attr("height", hl); 
 

 
var xscalel1 = d3.scaleLinear() 
 
     .domain([0, 100]) 
 
     .range([0, wl-30]); 
 

 
svgl.append("g") 
 
     .attr("transform", "translate(0," + hl + ")") 
 
     .call(d3.axisBottom(xscalel1));

<script src="https://d3js.org/d3.v4.min.js"></script>

スペース。

.attr("transform", "translate(0," + hl + ")") 

は、その最後に、つまり、SVGの高さ（HL）に軸を移動されます。このため、あなたは、何を見ることができません。

さて、このように、いくつかの余裕をもって同じコードを見てみましょう：

.attr("transform", "translate(0," + (hl - 20) + ")") 

その方法は、我々はSVGの終わり（高さ）の前に20個のピクセルに軸を移動しています。

var wl = 550; 
 
var hl = 150; 
 
var svgl = d3.select("body").append("svg") 
 
    .attr("width", wl) 
 
    .attr("height", hl); 
 

 
var xscalel1 = d3.scaleLinear() 
 
     .domain([0, 100]) 
 
     .range([0, wl-30]); 
 

 
svgl.append("g") 
 
     .attr("transform", "translate(0," + (hl - 20) + ")") 
 
     .call(d3.axisBottom(xscalel1));

<script src="https://d3js.org/d3.v4.min.js"></script>