Why wouldn't this d3 chart render?
-
24-12-2019 - |
Вопрос
I am trying to get a super basic nvd3 chart rendering. The code looks something like this (fiddle here):
<div id="chart" class="chart with-transitions">
<svg></svg>
</div>
and
nv.addGraph({
generate: function() {
var chart = nv.models.line()
.margin({top: 20, right: 20, bottom: 20, left: 20})
d3.select('#chart')
.datum(sinAndCos())
.call(chart);
return chart;
}});
function sinAndCos() {
var sin = [],
cos = [];
for (var i = 0; i < 100; i++) {
sin.push({x: i, y: Math.sin(i/10)});
cos.push({x: i, y: .5 * Math.cos(i/10)});
}
return [
{
values: sin,
key: "Sine Wave",
color: "#ff7f0e"
},
{
values: cos,
key: "Cosine Wave",
color: "#2ca02c"
}
];
}
But when I run this nothing happens. No errors generated, no chart displayed. I copied/modified this code from the most basic example they offer, but I can't seem to figure out what I broke. Can anyone see what I am doing wrong here?
Решение
<div id="chart" class="chart with-transitions">
<svg height="500"></svg>
</div>
...
d3.select('#chart svg')
Другие советы
You forgot to select the svg
element that you want to render your chart in. Also, call lineChart()
instead of line()
if you want to display the axis and other information:
var chart = nv.models.lineChart() <-- lineChart()
.margin({top: 20, right: 20, bottom: 20, left: 20});
d3.select('#chart svg') <-- include svg
.datum(sinAndCos())
.call(chart);
Не связан с StackOverflow