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

Question

我正在尝试从这些数据创建折线图。年份应位于 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}];

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

代码在 jsfiddle 中。 https://jsfiddle.net/u58x99vh/1/

Answer 1

这里有很多问题：

1. 您将"文本"分配给g元素，它没有这样的东西。
2. 您的 x 轴垂直向后旋转，这不应该。 它也没有放在图表的底部。
3. 最后，您错误地创建了路径。 而且您没有 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. Use the margin convention practice 
let margin = {top: 50, right: 50, bottom: 50, left: 50}
, width = window.innerWidth - margin.left - margin.right // Use the window's width 
, height = window.innerHeight - margin.top - margin.bottom; // Use the window's height
// The number of datapoints
//let kokoelma = d3.values(dataSorc);
//console.log(kokoelma);
// 5. X scale will use the index of our data
let xScale = d3.scaleLinear()
.domain(d3.extent(dataSorc, d => d.vuosi)) // input
.range([0, width]); // output
// 6. Y
let yScale = d3.scaleLinear()
.domain(d3.extent(dataSorc, d => d.arvo))
// input 
.range([height, 0]); // output
//console.log("yScale"); 
//console.log(yScale);
//console.log("xScale");
//console.log(xScale);
// 7. d3's line generator
let line = d3.line(dataSorc)
.x( d => xScale(d.vuosi)) // set the x values for the line generator
.y( d =>  yScale(d.arvo)); // set the y values for the line generator 
console.log("line");
console.log(line);
let svg = d3.select("#taulu").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//let g = svg.append("g").
//console.log("svg");
//console.log(svg);
// 3. Call the x axis in a group tag
svg.append("g")
		.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale))
.attr("class", "x_axis")
//.text("x_axis");
// Create an axis component with d3.axisBottom
// 4. Call the y axis in a group tag
svg.append("g")
.call(d3.axisLeft(yScale))
.attr("class", "y_axis")
//.text("y_axis"); 
// Create an axis component with d3.axisLeft
// 12. Appends a line for each datapoint 
svg.append("path")
.datum(dataSorc)
//.enter().append("path") // Uses the enter().append() method
.attr("class", "viiva")
.attr("d", line); // Assign a class for styling
//console.log("data tulostetaan");
//console.log(dataSorc);    
//console.log("svg kaikki data on laitettu");
//console.log(svg);
//console.log("testaa path");
//console.log(d3.selectAll("path"));

.viiva {
stroke: steelblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<p>
testi
</p>
<div id="taulu">
</div>

Answer 2

我重新设计了你的小提琴，检查一下。您的代码和我的代码之间存在差异。

您应该以这种方式解析您的日期：

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