时间戳

首页 > 解决方案 > 如何修复我的图表，以便 x 轴的比例由一组标签定义？

javascript - 如何修复我的图表，以便 x 轴的比例由一组标签定义？

问题描述

js，我用的是v3。我很确定我的图表的问题在于我的 x 轴。

我有这个结构：

[
 {date: "OCT 2020", close: 57370}
 {date: "SEP 2020", close: 60100}
 {date: "AGO 2020", close: 62530}
 {date: "JUL 2020", close: 68840}
 {date: "MAY 2020", close: 91470}
 {date: "ABR 2020", close: 54130}
 {date: "MAR 2020", close: 57960}
 {date: "FEB 2020", close: 55720}
 {date: "ENE 2020", close: 54360}
]

x轴将是关键“日期”，而将y-axis是close，我不知道如何定义，x-axis以便每个都表示 x 轴的值将是一个标签。（我的 x 轴上不会重复任何值，并且我的数据已排序）

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
 
body { font: 12px Arial;}
 
path { 
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}
 
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
 
</style>
<body>
 
<!-- load the d3.js library --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
 
<script>
 
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;
 
 
// Set the ranges
var x = d3.time.scale().range([0, width]);

var y = d3.scale.linear().range([height, 0]);
 
// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);
 
var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

 // Define the line
var valueline = d3.svg.line()
    .x(function(d) { console.log(x(d.date)); return x(d.date); })
    .y(function(d) { console.log(y(d.close)); return y(d.close); }); 

// Adds the svg canvas
var svg = 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 + ")");
 
// Get the data
 let data=[
 {date: "OCT 2020", close: 57370},
 {date: "SEP 2020", close: 60100},
 {date: "AGO 2020", close: 62530},
 {date: "JUL 2020", close: 68840},
 {date: "MAY 2020", close: 91470},
 {date: "ABR 2020", close: 54130},
 {date: "MAR 2020", close: 57960},
 {date: "FEB 2020", close: 55720},
 {date: "ENE 2020", close: 54360}
]

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));


    y.domain([0, d3.max(data, function(d) { return d.close; })]);

    // Add the valueline path.
    svg.append("path")  
        .attr("class", "line")
        .attr("d", valueline(data));
 
    // Add the X Axis
    svg.append("g")     
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
 
    // Add the Y Axis
    svg.append("g")     
        .attr("class", "y axis")
        .call(yAxis);
  


 
</script>
</body>
body { font: 12px Arial;}
 
path { 
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}
 
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

我依靠这个例子： https ://bl.ocks.org/d3noob/4414436

我该如何解决？

标签： javascriptd3.js

解决方案

这是工作代码： http://plnkr.co/edit/pdjNBWCYd91drndL?open= lib%2Fscript.js

这是使用 D3v3，您可能希望升级您的 D3 版本并查看 D3docs，因为最新的 D3 版本中有很多更改。

以下是您的数据的基本工作示例

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
 
body { font: 12px Arial;}
 
path { 
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}
 
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
 
</style>
<body>
 
<!-- load the d3.js library --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
 
<script>
 
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;
 
 
// Set the ranges
var x = d3.scale.ordinal().domain(["OCT 2020",
"SEP 2020",
"AGO 2020",
"JUL 2020",
"MAY 2020",
"ABR 2020",
"MAR 2020",
"FEB 2020",
"ENE 2020"])
.rangePoints([0, width]);
var y = d3.scale.linear().range([height, 0]);
 
// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(100);
 
var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(10);

 // Define the line
var valueline = d3.svg.line()
    .x(function(d) {  return x(d.date); })
    .y(function(d) {  return y(d.close); }); 

// Adds the svg canvas
var svg = 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 + ")");
 
// Get the data
 let data=[
 {date: "OCT 2020", close: 57370},
 {date: "SEP 2020", close: 60100},
 {date: "AGO 2020", close: 62530},
 {date: "JUL 2020", close: 68840},
 {date: "MAY 2020", close: 91470},
 {date: "ABR 2020", close: 54130},
 {date: "MAR 2020", close: 57960},
 {date: "FEB 2020", close: 55720},
 {date: "ENE 2020", close: 54360}
]

    // Scale the range of the data
    // x.domain(d3.extent(data, function(d) { return d.date; }));
    
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

    // Add the valueline path.
    svg.append("path")  
        .attr("class", "line")
        .attr("d", valueline(data));
 
    // Add the X Axis
    svg.append("g")     
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
 
    // Add the Y Axis
    svg.append("g")     
        .attr("class", "y axis")
        .call(yAxis);
</script>
</body>

推荐阅读