d3 TimeScale - 如何设置轴偏移

时间:2014-04-10 14:15:39

标签: d3.js

我只是尝试在d3中编写可重复使用的图表来可视化我们的能源数据。 我使用TimeScale作为X轴。我不能使用OrdinalScale(没有离散域),因此我必须计算" RangeBand"等等。

问题:我的酒吧与图表重叠 - 防止这种情况的最佳方法是什么? 我认为一种方法是在X轴域中设置一个偏移量 - 这是我的代码片段(希望很清楚......):

    // get X-Axis Min from all channels
    var tsMin = d3.min(channels, function (channel) {
        return d3.min(channel.DataRows, function (d) { return d.TimeStamp; });
    });
    // get X-Axis Max from all channels
    var tsMax = d3.max(channels, function (channel) {
        return d3.max(channel.DataRows, function (d) { return d.TimeStamp; });
    });

    // Test: offset 1 day 
    var tsMinOff = d3.time.day.offset(tsMin, -1)
    var tsMaxOff = d3.time.day.offset(tsMax, 1)

    xScale.domain([tsMinOff, tsMaxOff]);

    var bars = chGroup.selectAll(".bar").data(channel.DataRows);
    var barWidth = chartWidth / channel.DataRows.length;

    bars.enter().append("rect")
      .classed("bar", true)
      .attr("x", function (d) { return xScale(d.TimeStamp) - (barWidth / 2); })
      .attr("width", barWidth)
      .attr("y", function (d) { return yScale(d.Value) })
      .attr("height", function (d) { return chartHeight - yScale(d.Value); })
       .style("fill", channel.Color);

... THX !!

enter image description here

0 个答案:

没有答案