D3js线图配置
D3js线图配置
提问于 2016-11-27 16:41:50
有人知道为什么这条线没有显示在图表中吗？
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"
}); 回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-28 01:13:41
使用正确的代码，有4个问题(实际上是3个问题，因为我不确定第一个问题)：
- 你是指“选择-多”吗？请记住，“”不是默认包的一部分。所以，你必须说：
- 在
interpolate中没有d3.line。它应该是： .curve(d3.d3.curveBasis)； 或者其他你想要的曲线。 - 您必须将数据数组传递给您的行生成器。因此，与其： d: lineOne(impuestoPorcentaje)， 它应该是： d: lineOne(数据线)
- 代码中没有
h，只有hl。因此，在行生成器中： .y(函数(D){返回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>
Stack Overflow用户
发布于 2016-11-27 17:45:26
您没有将数据绑定到您的路径。
svgl.append("path")
.datum(dataline)
.attrs({ /* ... */ });页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40831290
复制相关文章
相似问题
腾讯云开发者
