Javascript D3：时间间隔为一年的x轴_Javascript_Html_D3.js

Javascript D3：时间间隔为一年的x轴

javascript html d3.js

Javascript D3：时间间隔为一年的x轴,javascript,html,d3.js,Javascript,Html,D3.js,我不熟悉d3和html，无法确定d3javascript部分或html部分是否有问题，即运行脚本时没有显示任何内容。我试图每隔一年显示一次x轴。以下是d3位 var w = 940, h = 300, pad =20, left_pad =100, data_set = [[20/02/1993], [05/03/1994], [14/09/1994], [23/04/

我不熟悉d3和html，无法确定d3javascript部分或html部分是否有问题，即运行脚本时没有显示任何内容。我试图每隔一年显示一次x轴。以下是d3位

var w = 940,
    h = 300,
    pad =20,
    left_pad =100,
    data_set = [[20/02/1993],
                [05/03/1994],
                [14/09/1994],
                [23/04/1992],
                [27/05/1993],
                [15/11/1992],
                [14/04/1994]
                ];      


var svg= d3.select("#punchcard")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

var xMin = d3.min(data_set, function(c) { return d3.min(c.values, function(v) { return v.date; }); });
var xMax = d3.max(data_set, function(c) { return d3.max(c.values, function(v) { return v.date; }); });

var xAxisScale = d3.time.scale()
                .range([0, w])
                .domain([xMin, xMax]);

var xAxis = d3.svg.axis()
            .scale(xAxisScale)
            .ticks(d3.time.year, 1)
            .orient("bottom");

var xAxisGroup = svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0, "+(h-pad)+")")
                .call(xAxis);

还有html位

<!DOCTYPE html>

<style>
.axis path,
.axis line {
    fill: none;
    stroke: #eee;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

.loading {
    font-family: sans-serif;
    font-size: 15px;
}

.circle {
    fill: #222;
}
</style>


<div id="punchcard"></div>

<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="script.js"></script>


.轴线路径，
.轴线{
填充：无；
冲程：#eee；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：无衬线；
字体大小：11px；
}
.装货{
字体系列：无衬线；
字体大小：15px；
}
.圆圈{
填充：#222；
}

任何帮助都将不胜感激。

我认为这并不像您认为的那样：

 var data_set = [[20/02/1993],
                [05/03/1994],
                [14/09/1994],
                [23/04/1992],
                [27/05/1993],
                [15/11/1992],
                [14/04/1994]
                ];

这将设置

数据

[ [ 0.005017561465127948 ],
  [ 0.0008358408559010365 ],
  [ 0.0007801181321743007 ],
  [ 0.0028865461847389557 ],
  [ 0.002709483191169092 ],
  [ 0.0006845564074479737 ],
  [ 0.0017552657973921766 ] ]

因为“/”将被解析为除法运算符

您可能需要的是以下内容：

var dateFormat = d3.time.format('%d/%m/%Y');
var data_set = [[dateFormat.parse('20/02/1993')],
                [dateFormat.parse('05/03/1994')],
                [dateFormat.parse('14/09/1994')],
                [dateFormat.parse('23/04/1992')],
                [dateFormat.parse('27/05/1993')],
                [dateFormat.parse('15/11/1992')],
                [dateFormat.parse('14/04/1994')]
                ];

更新：

实际上，需要对数据进行更多更改，看看如何从

数据集提取xMin
和xMax

var dateFormat = d3.time.format('%d/%m/%Y');
var data_set = [{ values: [{ date: dateFormat.parse('20/02/1993') }] },
                { values: [{ date: dateFormat.parse('05/03/1994') }] },
                { values: [{ date: dateFormat.parse('14/09/1994') }] },
                { values: [{ date: dateFormat.parse('23/04/1992') }] },
                { values: [{ date: dateFormat.parse('27/05/1993') }] },
                { values: [{ date: dateFormat.parse('15/11/1992') }] },
                { values: [{ date: dateFormat.parse('14/04/1994') }] }
               ];     

正在工作的演示：
它仍然无法工作。我得到的只是一个空白屏幕：（@user2398101更新了答案。我已经复制了你的文件并尝试运行，但仍然没有任何结果。我正在使用DreamWeaver，我使用“在浏览器中预览/调试”按钮来显示内容，但什么也没有显示。我尝试了Safari、Google Chrome、Firefox，但都失败了：（这显然与dreamweaver有关。我用TextEdit复制了文件并运行了它们，效果很好。非常感谢您的帮助。