我的图表就像我想要的那样 - 除了一部分...... X轴。虽然它显示正确的值，但我只需要以'M / D / Y，Time'格式对其进行格式化并渲染每一个。现在它只是每6个小时渲染一次。我有所有数据（在控制台中它是'DTIME #########'）。
我只需要将x轴日期格式正确，并实际渲染控制台中的所有日期。
谢谢！
以下是该文件的所有代码：
class Linechart extends React.Component {
constructor(props) {
super(props);
this.draw_chart = this.draw_chart.bind(this);
this.state = {}
}
componentDidMount() {
setTimeout(() => {
// EARTHQUAKES FROM FETCH FROM FEED.JSX
var parsed_quakes = (store.getState()).quake_data[0];
// MAGNITUDE 3 QUAKES
const mag_three = parsed_quakes.filter(quake =>
quake.properties.mag >= 3 && quake.properties.mag < 4
);
// DYNAMIC FUNCTION TO PARSE QUAKES
const mag_parse = (quakemag) => {
// NEW OBJECT
var mag_three_obj = new Object();
const quake_arr = []; // STORE QUAKES OBJECTS
var line_points = [];
for (var i = 0; i < quakemag.length; i++) {
// GET DATE AND TIME OF EACH MAG 3 EARTHQUAKE
const time_stamp = new Date(quakemag[i].properties.time);
const string_time = time_stamp.toString();
const mag_three_time = new Date(string_time.split(' ').slice(1, 5)).toLocaleString();
// DAY/TIME
const quake_three_time = mag_three_time.split(' ');
// MAGNITUDE
const quake_three_mag = quakemag[i].properties.mag;
mag_three_obj = {
emag: quake_three_mag,
etime: quake_three_time
}
var date_format = new Date(mag_three_time);
var milli_format = date_format.getTime();
line_points.push([quake_three_mag, milli_format]);
quake_arr.push(mag_three_obj);
} // END LOOP
// console.log('QUAKE ARR ', quake_arr);
// console.log('LINE POINTS ', line_points);
// DISPATCH TO USE IN draw_chart FUNCTION
store.dispatch({ type: 'PARSED-QUAKES', payload: quake_arr });
return quake_arr;
} // END MAG PARSE FUNCTION
// PARSED MAGNITUDE THREE INVOCATION
const parsed_mag_three = mag_parse(mag_three);
this.draw_chart(parsed_mag_three);
}, 1000);
}
// LINE CHART FUNCTION
draw_chart(data) {
// DECLARE MARGIN AND DIMENSIONS
var margin = {
top: 20,
right: 20,
bottom: 80,
left: 80
}
var width = 1100 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
// APPEND THE SVG OJECT TO THE BODY OF THE PAGE
// APPEND A GROUP ELEMENT AND MOVE IT TO TOP LEFT
var svg = d3.select('.line-graph').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 PARSED EARTHQUAKES FROM REDUX STORE
let parsed_quakes = (store.getState()).quake_data[0];
parsed_quakes.forEach((data) => {
data.etime = data.etime.join(' ');
data.emag = data.emag;
});
// DEFINE THE LINE
var value_line = d3.line()
.x(function(d) {return x(d.etime);})
.y(function(d) {return y(d.emag);})
// SET THE RANGES
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 3]);
// CONVERT DATES BACK TO MILLISECONDS
data.forEach(function(el) {
var date_format = new Date(el.etime);
var millis_format = date_format.getTime();
// CONVERT THE STRING DATE/TIME FORMAT TO MILLISECONDS
el.etime = millis_format;
})
console.log('DATA ARRAY 1ST EL ', data[0]);
console.log('DATA ARRAY LAST EL ', data[data.length - 1]);
// SET THE DOMAINS
// CREATE VALUES FOR THE X AXIS FROM MIN TO MAX
x.domain(
d3.extent(data, function(d) {
console.log('DTIME ', d.etime);
d.etime = new Date(d.etime);
return d.etime;
})
);
// CREATE VALUES FOR THE Y AXIS FROM MIN TO MAX
y.domain([3, d3.max(data, function(d) { return d.emag })]);
svg.append('path')
.data([data])
.attr('class', 'line')
.attr('d', value_line)
// APPEND X AXIS
svg.append('g')
.call(d3.axisBottom(x))
.attr('transform', 'translate(0,' + height + ')')
.append('text')
.attr('fill', '#E1ECA5')
.attr('x', 6)
.attr('dx', '1.5em')
.attr('dy', '2.5em')
.attr('text-anchor', 'end')
.attr("font-size", 16)
.text('Time');
// APPEND THE Y AXIS
svg.append('g')
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#E1ECA5")
.attr("transform", "rotate(-90)")
.attr("y", 0)
.attr("dy", "-2.5em")
.attr("text-anchor", "end")
.attr("font-size", 16)
.text("Magnitude");
}
render() {
return (
<div className='line-graph'>
</div>
)
}}
创建轴时，您可以使用两种方法：
这可能看起来像：
var axis = d3.axisBottom(x)
.ticks(d3.timeDay.every(1)) // a tick for every day.
.tickFormat(d3.timeFormat("%d/%m/%y")); // date in format: 31/01/19
这给你类似的东西（具有不同的日期格式）：
var parseTime = d3.timeParse("%B %d, %Y");
var min = parseTime("January 1, 2019");
var max = parseTime("January 31, 2019");
var mid = parseTime("January 16, 2019");
var x = d3.scaleTime()
.domain([min,max])
.range([20,480])
var axis = d3.axisBottom(x)
.ticks(d3.timeDay.every(1))
.tickFormat(d3.timeFormat("%d-%B"));
var g = d3.select("svg")
.append("g")
.attr("transform","translate(0,50)")
.call(axis);
g.selectAll("text")
.attr("transform","translate(10,0)rotate(60)")
.style("text-anchor","start");
// Animate a demonstration:
var i = 0;
function cycle() {
x.domain([[min,mid,min,min][i%4],[mid,max][i%2]]);
g.transition()
.duration(2000)
.call(axis)
.on("end", function() {
if(i++ < 40) cycle();
})
}
cycle();<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="300"></svg>有关格式规范的完整列表，请参阅文档here。