svg - d3.js - 如何在时间刻度轴上更改矩形的 x 位置？

Question

我在时间尺度 x 轴上绘制条形图。例如，

var x = d3.time.scale()
    .domain([minDate, maxDate])
    .range([0, width]);

chart.selectAll(".bar")
    .data(data)
  .enter().append("rect")
    .attr("x", bar_graph.x())
    .attr("y", d.value)
    .attr("width", 10);

矩形的左角从分配的 x 点开始，但我想将 x 点分配给矩形的中心。

由于是时间尺度，简单的减法 x-5（假设宽度为 10px）不起作用。我尝试了 invert()，也检查了 svg 参考，但失败了。

Answer 1

问题确实在于设置 x 属性，看来问题在于 bar_graph.x() 语句，尝试执行以下操作：

.attr("x", function(d) {return x(d.dateVal)-barwidth/2;})

在这里查看完整的实现：http: //jsfiddle.net/qAHC2/4/