Question

有人知道为什么线条没有显示在图表中？

 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"

                });

Answer 1

您没有将数据绑定到路径上。

svgl.append("path")
  .datum(dataline)
  .attrs({ /* ... */ });

Answer 2

使用完全您的代码，有4个问题（实际上是3个，因为我对第一个问题不确定）：

您是否正在引用＆＃34; selection-multi＆＃34;？请记住＆＃34; selection-multi＆＃34;不是默认包的一部分。所以，你必须把：
```
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
```
interpolate中没有d3.line。它应该是：
```
.curve(d3.curveBasis);
```
或您想要的任何其他曲线。
您必须将数据数组传递给线生成器。所以，而不是：
```
d: lineOne(impuestoPorcentaje),
```
它应该是：
```
d: lineOne(dataline),
```

代码中没有h，但hl。所以，在行生成器中：

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

这是您的工作代码：

＆＃13;

 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"

     });

＆＃13;

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

＆＃13;

D3js折线图配置

2 个答案: