Question

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .axis path {
      fill: none;
      stroke: #777;
      shape-rendering: crispEdges;
    }
    .axis text {
      font: 10px sans-serif;
    }
  </style>
</head>
<body>
  <svg id="visualization" width="1000" height="500"></svg>
</body>
</html>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
function InitChart() {
    var data = [{
        "sale": "215",
        "calendarDate": "20140302"
    }, {
        "sale": "179",
        "calendarDate": "20140303"
    }, {
        "sale": "199",
        "calendarDate": "20140304"
    }, {
        "sale": "134",
        "calendarDate": "20140305"
    }, {
        "sale": "176",
        "calendarDate": "20140306"
    }];
    var vis = d3.select("#visualization"),
        WIDTH = 1000,
        HEIGHT = 500,
        MARGINS = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 50
        },
        calendarDatesAsStrings = ['02.03.2014','03.03.2014','04.03.2014','05.03.2014','06.03.2014'],
        xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([20140302, 20140306]),
        yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([124, 225]),
        xAxis = d3.svg.axis().scale(xScale),
        yAxis = d3.svg.axis().scale(yScale).orient("left");

    vis.append("svg:g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
        .call(xAxis)
        .selectAll('text')
        .text(function (d, i) { return calendarDatesAsStrings[i]; });

    vis.append("svg:g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + (MARGINS.left) + ",0)")
        .call(yAxis);

    var lineGen = d3.svg.line()
        .x(function(d) {
            return xScale(d.calendarDate);
        })
        .y(function(d) {
            return yScale(d.sale);
        });

    vis.append('svg:path')
        .attr('d', lineGen(data))
        .attr('stroke', 'green')
        .attr('stroke-width', 2)
        .attr('fill', 'none');
}
InitChart();
</script>

http://jsbin.com/zupejizeho/1/edit

我希望标签处于正确的位置，而不是。

相反，它们看起来像是“压缩”并放置在每个半段而不是整段。

我做错了什么？

Answer 1

你决定在这里做。将您的日期视为字符串并使用ordinal scale或将日期视为日期并使用time scale。现在你使用的线性刻度不能很好地映射到日期戳。

由于您的数据集非常有限，因此序数比例可能更容易：

 // map all my dates to an ordinal 
 // with points separated nicely in my range
 xScale = d3.scale.ordinal()
   .rangePoints([MARGINS.left, WIDTH - MARGINS.right])
   .domain(data.map(function(d){ return d.calendarDate })),

格式化日期字符串：

// then reformat the strings to what you want with some format helpers
oldFormat = d3.time.format("%Y%m%d"),
newFormat = d3.time.format("%m.%d.%Y");

xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
  .tickFormat(function(d){
    var dateTime = oldFormat.parse(d); // parse the string to date
    return newFormat(dateTime); // format it back to appropriate string
  }),

更新了示例here。

如果您获得更多的数据复杂性，您可能希望转而真正将日期视为日期。首先，修复您的数据：

data = data.map(function(d){ 
  return {
    sale: +d.sale, // this is really a numeric
    calendarDate: oldFormat.parse(d.calendarDate) // this be a datetime now
  }
});

按时间设置比例：

xScale = d3.time.scale()
  .range([MARGINS.left, WIDTH - MARGINS.right])
    .domain(
      [d3.min(data.map(function(d){ return d.calendarDate })),
        d3.max(data.map(function(d){ return d.calendarDate }))]
    ),

格式变得更简单：

xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
  .tickFormat(d3.time.format("%m.%d.%Y")),

这是example。

Answer 2

你不需要在调用xAxis之后添加最后两行，这里：

vis.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis)
    .selectAll('text')
    .text(function (d, i) { return calendarDatesAsStrings[i]; });

你只需要拨打xAxis就可以了，工作链接：http://jsbin.com/yabecihihi/1/edit?html,output（需要使用时间刻度正确解析日期）

为X轴提供适当的刻度值

2 个答案: