D3版本4 AXIS [英] D3 version 4 AXIS

问题描述

有人知道为什么我看不到我的折线图的轴吗？

这是指向图表的链接： https://d3responsive.firebaseapp.com/responsive.html

这是JavaScript代码：

  / * D3-v4曲线插值比较：https://bl.ocks.org/ d3noob / ced1b9b18bd8192d2c898884033b5529 * / 
 
 var dataline1 = [
 {mes：1，impuestoPorcentaje：20}，
 {mes：2，impuestoPorcentaje： 14，
 {mes：3，impuestoPorcentaje：20}，
 {mes：4，impuestoPorcentaje：21} impuestoPorcentaje：15}，
 {mes：6，impuestoPorcentaje：22}，
 {mes：7，impuestoPorcentaje：9}，
 ：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} ：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 
}）; 
 
 //域和范围
 
 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]）; 
 
 //行
 
 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 b $ bstroke-width：2，
fill：none
}）; 
 
 //添加x轴
 svgl.append（g）
 .attr（transform，translate（0，+ hl +）） 
 .call（d3.axisBottom（xscalel1））; 
 
 //添加y轴
 svgl.append（g）
 .call（d3.axisLeft（yscalel1））; 
  

解决方案

您正在将轴一直向下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 ））
  

将轴移动到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 -  20）+））.call（d3.axisBottom（xscalel1））;  

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

Does someone know why I can't see the axis of my line chart?

This is the link to the chart: https://d3responsive.firebaseapp.com/responsive.html

And this is the JavaScript code:

/* 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));

解决方案

You are translating the axis all the way down to the height of the SVG. You have to leave some margin.

For instance, this is your code right now (I'm simplifying your domain):

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>

Nothing will show up after clicking "run code snippet", just a blank space. You can't see anything, because this:

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

Is moving the axis to the height (hl) of the SVG, that is, to its end.

Now let's see the same code with some margin, like this:

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

That way, we are moving the axis to 20 pixels before the end (height) of the SVG.

And here is the result, now you can see the axis:

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>

这篇关于D3版本4 AXIS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！