从 D3 3.0 转换为 4.0 x 轴不显示

converting from d3 3.0 to 4.0 x axis not displaying

本文关键字：显示 D3 转换      更新时间：2023-09-26

我已经搜索了包括这里在内的所有答案，但我似乎找不到任何可以解决我特定问题的东西。

我正在学习 D3，但大多数教程都是针对 3.x 的。 我更喜欢使用最新版本，所以我尝试采用我找到的工作 3.x 教程并将其转换为 4.x。 Y 轴可见，但 X 轴刻度、X 轴标签和图表中的数据行不可见。 看起来我只需要更改一些函数名称，但我一定错过了什么。 我有尝试/捕获以防万一有未处理的异常，但没有捕获。 我尝试使用 Chrome 逐步执行代码，但我没有看到任何明显的东西。

这是代码。 有人有什么想法吗？

<html>
<head><title>D3 test</title></head>
<body>
<div class="jumbotron">
    <h1>Charting </h1>
    <p class="lead">Charting with D3</p>
</div>
<div class="row">
    <style>
        .row div {
            font: 10px sans-serif;
        }
        .axis path,
        .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }
        .line {
            fill: none;
            stroke: steelblue;
            stroke-width: 1.5px;
        }
    </style>
        <script src="http://d3js.org/d3.v4.min.js"></script>
        <script>
            Date.prototype.addHours = function(h) {    
                this.setTime(this.getTime() + (h*60*60*1000)); 
                return this;
            }
            var parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%S");
            function generateData()
            {
                try
                {
                    var startDate = parseDate("2016-07-15T00:00:00");
                    var currentDate = startDate;
                    var data = new Array(61);
                    for (var index = 0; index < data.length; ++index)
                    {
                        data[index] = { date: currentDate, close: Math.random() * 100 };
                        currentDate = currentDate.addHours(1);
                    }
                    return data;
                }
                catch (ex) 
                {
                    ex = ex;
                }
            }
            try{
                var margin = {top: 20, right: 20, bottom: 30, left: 50},
                    width = 960 - margin.left - margin.right,
                    height = 500 - margin.top - margin.bottom;
                var x = d3.scaleTime().range([0, width]);
                var y = d3.scaleLinear().range([height, 0]);
                var xAxis = d3.axisBottom(x);
                var yAxis = d3.axisLeft(y);
                var line = d3.line()
                    .x(function(d) { return x(d.date); })
                    .y(function(d) { return y(d.close); });
                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 + ")");
                var data = generateData();
                x.domain(d3.extent(data, function(d) { return d.date; }));
                y.domain(d3.extent(data, function(d) { return d.close; }));
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);
                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                  .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end")
                    .text("Price ($)");
                svg.append("path")
                    .datum(data)
                    .attr("class", "line")
                    .attr("d", line);
            }
            catch (ex)
            {
                ex = ex;
            }
        </script>
</div>
</body>
</html>

这里的问题不在于 D3 的版本（3.x 或 4.x），而在于您的generateData函数：所有对象都有相同的日期（最后一个）。

我将函数更改为：

function generateData(){
                var startDate = parseDate("2016-07-15T00:00:00");
                var currentDate = startDate;
                var data = new Array(61);
                for (var index = 0; index < data.length; ++index)
                {
                    data[index] = { date: currentDate.toString(), close: Math.random() * 100 };
                    currentDate.addHours(1);
                }
                return data;
            };

然后，我将字符串转换回日期：

data.forEach(function(d){
    d.date = Date.parse(d.date); 
});

这是小提琴：https://jsfiddle.net/gerardofurtado/yngdyqdr/1/

PS：在您的代码中，没有addHours.我用了这个：

Date.prototype.addHours = function(h) {    
    this.setTime(this.getTime() + (h*60*60*1000)); 
    return this;   
};
相关文章：