Как я могу исправить свою диаграмму так, чтобы масштаб оси x определялся группой меток?

ProgramBox

Как я могу исправить свою диаграмму так, чтобы масштаб оси x определялся группой меток?

Post author:admin
Запись опубликована:5 ноября, 2022
Post category:Вопросы по программированию

#javascript #d3.js

Вопрос:

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

как я могу это исправить?

Ответ №1:

Вот рабочий код :: http://plnkr.co/edit/pdjNBWCYd91drndL?open=lib/script.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>

Развернуть фрагмент

1. Я действительно ценю вашу помощь. Большое вам спасибо, надеюсь, я вас не беспокою, но знаете ли вы, что я должен сделать, чтобы получить график кривой линии?

2. @yavg вы можете добавить .interpolate(«basis»); в d3.svg.line