Json 线图在d3.js中不起作用

我正在尝试从这些数据创建折线图。年份应在x轴上，数值应在y轴上

[{"year":2000,"value":1},{"year":2001,"value":2},
{"year":2002,"value":3},
{"year":2003,"value":4},{"year":2004,"value":5},
{"year":2005,"value":6}];

我不明白为什么它不起作用

代码在JSFIDLE中。 我把你的小提琴改了。有一个问题

您应该这样分析您的日期：

const parseTime = d3.timeParse("%Y");

dataSorc.forEach(item => {
  item.vuosi = parseTime(item.vuosi);
  item.arvo = item.arvo;
});

并对x轴使用

scaleTime

，而不是

scaleLinear

：

let xScale = d3.scaleTime()
    .domain(d3.extent(dataSorc, d => d.vuosi)) // input
    .range([0, width]); // output

您只有一条线，因此可以这样绘制：

svg.append("path")
    .attr("class", "viiva")
    .attr("stroke", "#000")
    .attr("d",item => line(dataSorc)); 

我把你的小提琴改了。有一个问题

您应该这样分析您的日期：

const parseTime = d3.timeParse("%Y");

dataSorc.forEach(item => {
  item.vuosi = parseTime(item.vuosi);
  item.arvo = item.arvo;
});

并对x轴使用

scaleTime

，而不是

scaleLinear

：

let xScale = d3.scaleTime()
    .domain(d3.extent(dataSorc, d => d.vuosi)) // input
    .range([0, width]); // output

您只有一条线，因此可以这样绘制：

svg.append("path")
    .attr("class", "viiva")
    .attr("stroke", "#000")
    .attr("d",item => line(dataSorc)); 

这里有很多问题：

将“文本”分配给

g

元素，它没有这样的内容

你的x轴是垂直旋转的，它不应该是垂直的。此外，它也没有放在图表的底部

最后，您创建的路径不正确。而且您没有CSS类的声明

viiva

综上所述：

let dataSorc=[{“vuosi”：2000，“arvo”：1}，{“vuosi”：2001，“arvo”：2}，{“vuosi”：2002，“arvo”：3}，
{“vuosi”：2003，“arvo”：4}，{“vuosi”：2004，“arvo”：5}，{“vuosi”：2005，“arvo”：6}]；
// 2. 使用保证金惯例惯例
让边距={top:50，right:50，bottom:50，left:50}
，width=window.innerWidth-margin.left-margin.right//使用窗口的宽度
，height=window.innerHeight-margin.top-margin.bottom；//利用窗户的高度
//数据点的数量
//设kokoelma=d3.values（dataSorc）；
//控制台日志（kokoelma）；
// 5. X标度将使用我们数据的索引
设xScale=d3.scaleLinear（）
.domain（d3.extent（dataSorc，d=>d.vusi））//输入
.范围（[0，宽度]；//输出
// 6. Y
设yScale=d3.scaleLinear（）
.domain（d3.extent（dataSorc，d=>d.arvo））
//输入
.范围（[高度，0]）；//输出
//控制台日志（“yScale”）；
//控制台日志（yScale）；
//console.log（“xScale”）；
//log（xScale）；
// 7. d3线发生器
让line=d3.line（dataSorc）
.x（d=>xScale（d.vuosi））//设置线生成器的x值
.y（d=>yScale（d.arvo））；//设置线生成器的y值
控制台日志（“行”）；
控制台日志（行）；
让svg=d3。选择（#taulu”）。追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//设g=svg.append（“g”）。
//console.log（“svg”）；
//log（svg）；
// 3. 调用组标记中的x轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（xScale））
.attr（“类”、“x_轴”）
//.文本（“x_轴”）；
//使用d3.axisBottom创建轴组件
// 4. 调用组标记中的y轴
svg.append（“g”）
.call（d3.axisLeft（yScale））
.attr（“类”、“y轴”）
//.文本（“y_轴”）；
//使用d3.axisLeft创建轴组件
// 12. 为每个数据点追加一行
追加（“路径”）
.基准面（数据源）
//.enter（）.append（“路径”）//使用enter（）.append（）方法
.attr（“类别”、“viiva”）
.attr（“d”，行）；//为样式指定一个类
//console.log（“数据tulostetaan”）；
//console.log（dataSorc）；
//log（“laitettu上的svg kaikki数据”）；
//log（svg）；
//log（“testaa路径”）；
//console.log（d3.selectAll（“路径”）
.viiva{
笔画：钢蓝；
}


睾丸

这里有很多问题：

将“文本”分配给
g
元素，它没有这样的内容
你的x轴是垂直旋转的，它不应该是垂直的。此外，它也没有放在图表的底部
最后，您创建的路径不正确。而且您没有CSS类的声明
viiva
综上所述：


let dataSorc=[{“vuosi”：2000，“arvo”：1}，{“vuosi”：2001，“arvo”：2}，{“vuosi”：2002，“arvo”：3}，
{“vuosi”：2003，“arvo”：4}，{“vuosi”：2004，“arvo”：5}，{“vuosi”：2005，“arvo”：6}]；
// 2. 使用保证金惯例惯例
让边距={top:50，right:50，bottom:50，left:50}
，width=window.innerWidth-margin.left-margin.right//使用窗口的宽度
，height=window.innerHeight-margin.top-margin.bottom；//利用窗户的高度
//数据点的数量
//设kokoelma=d3.values（dataSorc）；
//控制台日志（kokoelma）；
// 5. X标度将使用我们数据的索引
设xScale=d3.scaleLinear（）
.domain（d3.extent（dataSorc，d=>d.vusi））//输入
.范围（[0，宽度]；//输出
// 6. Y
设yScale=d3.scaleLinear（）
.domain（d3.extent（dataSorc，d=>d.arvo））
//输入
.范围（[高度，0]）；//输出
//控制台日志（“yScale”）；
//控制台日志（yScale）；
//console.log（“xScale”）；
//log（xScale）；
// 7. d3线发生器
让line=d3.line（dataSorc）
.x（d=>xScale（d.vuosi））//设置线生成器的x值
.y（d=>yScale（d.arvo））；//设置线生成器的y值
控制台日志（“行”）；
控制台日志（行）；
让svg=d3。选择（#taulu”）。追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//设g=svg.append（“g”）。
//console.log（“svg”）；
//log（svg）；
// 3. 调用组标记中的x轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（xScale））
.attr（“类”、“x_轴”）
//.文本（“x_轴”）；
//使用d3.axisBottom创建轴组件
// 4. 调用组标记中的y轴
svg.append（“g”）
.call（d3.axisLeft（yScale））
.attr（“类”、“y轴”）
//.文本（“y_轴”）；
//使用d3.axisLeft创建轴组件
// 12. 为每个数据点追加一行
追加（“路径”）
.基准面（数据源）
//.enter（）.append（“路径”）//使用enter（）.appen