我正在尝试在 d3.js 中创建折线图,但只有我的轴出现;该线不显示。
我认为我使用巢穴的方式可能有问题,但我不知道如何修复它。
这是我的代码执行时显示的当前状态 在此输入图片描述
这是代码片段,我使用 d3 ver 3
// Define line generator function for Weekday Sales chart
var lineWeekday = d3.svg.line()
.x(function(d) { return xWeekday(d.key); })
.y(function(d) { return yWeekday(d.value); });
// Render Weekday Sales chart
var xWeekday = d3.scale.ordinal().domain(totalSalesByWeekday.map(function(d) { return d.key; }))
.rangeRoundBands([0, width], 0.1);
var yWeekday = d3.scale.linear().domain([0, d3.max(totalSalesByWeekday, function(d) { return d.value; })])
.range([height, 0]);
// Render Weekday Sales line chart
svgWeekday.append("path")
.data(totalSalesByWeekday)
.attr("class", "line-weekday")
.attr("d", function(d){return lineWeekday (d);})
.attr("fill", "none")
.attr("stroke", "blue")
.attr("stroke-width", 2);
svgWeekday.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis().scale(xWeekday).orient("bottom"));
svgWeekday.append("g")
.attr("class", "y-axis")
.call(d3.svg.axis().scale(yWeekday).orient("left"));
我试图通过在 .data 中添加 [] 来将其变成数组,但它给了我错误,所以我被卡住了
.datum() 而不是 .data() 将整个数据集绑定到路径。
// Sample data
var totalSalesByWeekday = [
{ key: "Monday", value: 150 },
{ key: "Tuesday", value: 200 },
{ key: "Wednesday", value: 250 },
{ key: "Thursday", value: 300 },
{ key: "Friday", value: 400 },
{ key: "Saturday", value: 500 },
{ key: "Sunday", value: 350 }
];
// Dimensions and margins
var margin = { top: 20, right: 30, bottom: 50, left: 50 },
width = 800 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Create SVG container
var svgWeekday = d3.select("body")
.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 + ")");
// Scales
var xWeekday = d3.scale.ordinal()
.domain(totalSalesByWeekday.map(function(d) { return d.key; }))
.rangePoints([0, width]);
var yWeekday = d3.scale.linear()
.domain([0, d3.max(totalSalesByWeekday, function(d) { return d.value; })])
.range([height, 0]);
// Line generator
var lineWeekday = d3.svg.line()
.x(function(d) { return xWeekday(d.key); })
.y(function(d) { return yWeekday(d.value); });
// Render the line
svgWeekday.append("path")
.datum(totalSalesByWeekday) // Bind the entire dataset
.attr("class", "line-weekday")
.attr("d", lineWeekday);
// X-axis
svgWeekday.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis().scale(xWeekday).orient("bottom"));
// Y-axis
svgWeekday.append("g")
.attr("class", "y-axis")
.call(d3.svg.axis().scale(yWeekday).orient("left"));
// Add labels
svgWeekday.append("text")
.attr("transform", "translate(" + (width / 2) + "," + (height + margin.bottom - 10) + ")")
.style("text-anchor", "middle")
.text("Weekdays");
svgWeekday.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -margin.left)
.attr("x", -(height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Sales");
.line-weekday {
fill: none;
stroke: blue;
stroke-width: 2;
}
.x-axis path,
.x-axis line,
.y-axis path,
.y-axis line {
shape-rendering: crispEdges;
stroke: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>