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

这里有很多问题：

您被分配给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. 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

我重写了你的小提琴，check it。有diff between your code and my。

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

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

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

并将scaleTime用于x轴而不是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));

线图在d3.js中不起作用

2 个答案: