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