Javascript 我的X轴没有呈现我想要的所有刻度-D3 JS

我的图表只按照我想要的方式工作-除了一部分。。。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>
    )
}}

类折线图扩展了React.Component{
建造师（道具）{
超级（道具）；
this.draw\u chart=this.draw\u chart.bind（this）；
this.state={}
}
componentDidMount（）{
设置超时（（）=>{
//来自FETCH FROM FEED.JSX的地震
var解析地震=（store.getState（））.quake地震数据[0]；
//三级地震
const mag_three=已解析的地震。过滤器（地震=>
quake.properties.mag>=3&&quake.properties.mag<4
);
//解析地震的动态函数
常量mag_parse=（quakemag）=>{
//新对象
var mag_three_obj=新对象（）；
const quake_arr=[]；//存储地震对象
var line_points=[]；
对于（变量i=0；i{
data.etime=data.etime.join（“”）；
data.emag=data.emag；
});
//界定界线
var value_line=d3.line（）
.x（函数（d）{返回x（d.etime）；}）
.y（函数（d）{返回y（d.emag）；}）
//设定范围
var x=d3.scaleTime（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，3]）；
//将日期转换回毫秒
data.forEach（函数（el）{
变量日期\格式=新日期（el.etime）；
var millis_format=date_format.getTime（）；
//将字符串日期/时间格式转换为毫秒
el.etime=millis_格式；
})          
log（'DATA ARRAY 1ST EL'，DATA[0]）；
log（'DATA ARRAY LAST EL'，DATA[DATA.length-1]）；
//设置域
//为X轴创建从最小到最大的值
x、 领域(
d3.范围（数据，函数（d）{
console.log（'DTIME'，d.etime）；
d、 时间=新日期（d.etime）；
返回d.etime；
})
);  
//创建Y轴从最小值到最大值的值
y、 域（[3，d3.max（数据，函数（d）{return d.emag}）]）；
append（'path'）
.数据（[数据]）
.attr（'类'，'行'）
.attr（'d'，值_行）
//附加X轴
append（'g'）
.call（d3.axisBottom（x））
.attr（'transform'，'translate（0'，+height+'））
.append（'文本'）
.attr（'fill'，'E1ECA5'）
.attr（'x'，6）
.attr（'dx'，'1.5em'））
.attr（'dy'，'2.5em'））
.attr（'text-anchor'，'end'）
.attr（“字体大小”，16）
.文本（“时间”）；
//附加Y轴
append（'g'）
.呼叫（d3.左（y））
.append（“文本”）
.attr（“填充”和“#E1ECA5”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，0）
.attr（“dy”，“2.5em”）
.attr（“文本锚定”、“结束”）
.attr（“字体大小”，16）
.文本（“幅度”）；
}
render（）{
返回(
)
}}

创建轴时，可以使用两种方法：

• 格式化日期
• 指定勾号的频率

  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