Question

我是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>

非常感谢任何帮助。

Answer 1

我认为这不符合您的想法：

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

这将使data_set =

[ [ 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和data_set。

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') }] }
               ];

工作演示：http://plnkr.co/edit/QvyvxyNsCthrRO3i0zBq?p=preview

D3：x轴，时间间隔为一年

1 个答案: