Кто-нибудь знает, почему на графике не отображается линия?

 var dataline = [
        {"mes": 1, "impuestoPorcentaje": 30},
        {"mes": 2, "impuestoPorcentaje": 49},
        {"mes": 3, "impuestoPorcentaje": 100},
        {"mes": 4, "impuestoPorcentaje": 20},
        {"mes": 5, "impuestoPorcentaje": 200},
        {"mes": 6, "impuestoPorcentaje": 150},
        {"mes": 7, "impuestoPorcentaje": 80},
        {"mes": 8, "impuestoPorcentaje": 170}
     ];

          var wl = 600;

          var hl = 450;

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



          var lineOne =  d3.line()
            .x(function(d) { 
                return d.mes * 33; 
              })
            .y(function(d) { 
                return h-(d.impuestoPorcentaje * 3);
              })
            .interpolate ("linear");



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

                    d: lineOne(impuestoPorcentaje),
                    "stroke": "blue" ,
                    "stroke-width" : 2,
                    "fill" : "none"

                }); 
0
Rodrigo Luna 27 Ноя 2016 в 19:41

2 ответа

Лучший ответ

Используя точно ваш код, возникает 4 проблемы (на самом деле 3, потому что я не уверен насчет первой):

  1. Вы имеете в виду "отбор-мульти"? Имейте в виду, что "selection-multi" не входит в комплект по умолчанию. Итак, вам нужно поставить:

    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
    
  2. В d3.line нет interpolate. Так должно быть:

    .curve(d3.curveBasis);
    

    или любой другой кривой, какой вы хотите.

  3. Вы должны передать массив данных своему генератору строк. Итак, вместо:

    d: lineOne(impuestoPorcentaje),
    

    должен быть:

    d: lineOne(dataline),
    
  4. В вашем коде нет h, но hl. Итак, в генераторе строк:

     .y(function(d) { 
         return hl-(d.impuestoPorcentaje * 3);
     })
    

Это ваш рабочий код:

 var dataline = [{
     "mes": 1,
     "impuestoPorcentaje": 30
 }, {
     "mes": 2,
     "impuestoPorcentaje": 49
 }, {
     "mes": 3,
     "impuestoPorcentaje": 100
 }, {
     "mes": 4,
     "impuestoPorcentaje": 20
 }, {
     "mes": 5,
     "impuestoPorcentaje": 200
 }, {
     "mes": 6,
     "impuestoPorcentaje": 150
 }, {
     "mes": 7,
     "impuestoPorcentaje": 80
 }, {
     "mes": 8,
     "impuestoPorcentaje": 170
 }];

 var wl = 600;

 var hl = 450;

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



 var lineOne = d3.line()
     .x(function(d) {
         return d.mes * 33;
     })
     .y(function(d) {
         return hl - (d.impuestoPorcentaje * 3);
     })
     .curve(d3.curveBasis);



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

         d: lineOne(dataline),
         "stroke": "blue",
         "stroke-width": 2,
         "fill": "none"

     });
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
0
Gerardo Furtado 28 Ноя 2016 в 01:13

Вы не привязываете свои данные к своему пути.

svgl.append("path")
  .datum(dataline)
  .attrs({ /* ... */ });
0
Paul S 27 Ноя 2016 в 17:45