Javascript 在d3.js中使用TickValue控制棒位置

我试图使用d3构建一个多系列条形图，但由于数据集的稀疏性，遇到了问题

我想强制x轴每天都打勾，即使没有数据。我所拥有的测试数据可以有相隔数周的数据点，所以我希望没有条带的宽区域-这很好

我原以为我可以使用tickValues数组强制xAxis使用一组预定义的记号，但这会导致非常奇怪的显示，即将每天的文本覆盖在确实有一些数据的日期之上

我已经包括了我的意思的截图

我有种感觉，当我计算钢筋的宽度时，我应该做些什么，但我不知道那可能是什么

代码：

var数据=[]；
var值=[]；
var max=uu.max（chartData.tabular，函数（assessment）{return assessment.dateUTC；}）；
var min=uuData.min（chartData.tabular，函数（assessment）{return assessment.dateUTC；}）；
var iter=moment.twix（min.dateUTC，max.dateUTC）。迭代（“天”）；
while（iter.hasNext（））{
var momentObj=iter.next（）；
var assessment=uu.find（chartData.tabular，{'date'：momentObj.format（'DD/MM/yyyyy'））；
tickValues.push（momentObj.valueOf（））；
如果（评估！=null）{
如果（assessment.type==‘计算’）{
data.push（{date:momentObj.valueOf（），computed:assessment.score，manual:null}）；
}
如果（assessment.type==“手动”）{
push（{date:momentObj.valueOf（），computed:null，manual:assessment.score}）；
}
}
}
日志（数据）；
var margin={顶部：20，右侧：55，底部：30，左侧：40}，
宽度=$（“#卡海图表”）.width（）-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.rangeRound（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.tickValues（tickValues）
.tickFormat（函数（d）{返回d3.time.format（'%d/%m/%y'）（新日期（d））}）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var color=d3.scale.ordinal（）
.范围（[“001c9c”、“101b4d”、“475003”、“9c8305”、“d3c47c”）；
var svg=d3。选择（“卡海图表svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var labelVar=‘日期’；
var varNames=d3.keys（数据[0]）.filter（函数（键）{return key！==labelVar；}）；
颜色。域名（varNames）；
data.forEach（函数（d）{
var y0=0；
d、 mapping=varNames.map（函数（名称）{
返回{
姓名:姓名,，
标签：d[labelVar]，
y0:y0，
y1:y0+=+d[名称]
};
});
d、 total=d.mapping[d.mapping.length-1].y1；
});
x、 域（data.map（函数（d）{returnd.date；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.total；}）]；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“分数”）；
var selection=svg.selectAll（“.series”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类”、“系列”）
.attr（“transform”，函数（d）{return”translate（“+x（d.date）+”，0）”；}）；
selection.selectAll（“rect”）
.data（函数（d）{返回d.mapping；}）
.enter（）.append（“rect”）
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{返回y（d.y1）；}）
.attr（“高度”，函数（d）{返回y（d.y0）-y（d.y1）；}）
.style（“fill”，函数（d）{返回颜色（d.name）；}）
.style（“笔划”、“灰色”）
.on（“mouseover”，函数（d）{showPopover.call（this，d）；}）
.on（“mouseout”，函数（d）{removePopovers（）；}）
var legend=svg.selectAll（“.legend”）
.data（varNames.slice（）.reverse（））
.enter（）.append（“g”）
.attr（“类”、“图例”）
.attr（“转换”，函数（d，i）{return“translate（55，+i*20+）”）；}；
图例。追加（“rect”）
.attr（“x”，宽度-10）
.attr（“宽度”，10）
.attr（“高度”，10）
.样式（“填充”，颜色）
.风格（“笔画”、“灰色”）；
图例。追加（“文本”）
.attr（“x”，宽度-12）
.attr（“y”，6）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“结束”）
.text（函数（d）{return d；}）；
函数移除弹出框（）{
$（'.popover'）。每个（函数（）{
$（this.remove（）；
});
}
功能显示窗口（d）{
$（这个）({
标题：d.name，
位置：'自动顶部'，
容器：'主体'，
触发器：“手动”，
是的，
内容：函数（）{
return“Date:+d3.time.format（“%d/%m/%y”）（新日期（d.label））+

分数：“+d3.格式（“，”）（d.value？d.value:d.y1-d.y0）；}
});
$（this.popover（'show'））
}

当域中存在值时，序号刻度将始终显示相同数量的刻度。您只需要将完整的日期数组作为域传递

更换这条线

x.domain（data.map（函数（d）{returnd.date；}））

用这个

x.domain（值）

看起来您已经正确地设置了其他所有内容，因此这将沿轴将条形分隔开并使其更细。
一种常见的方法是对数据集进行后期处理，并明确地为每天添加y值为零的值。
var data = [];
var tickValues = [];

var max = _.max(chartData.tabular, function(assessment) { return assessment.dateUTC; });
var min = _.min(chartData.tabular, function(assessment) { return assessment.dateUTC; });
var iter = moment.twix(min.dateUTC, max.dateUTC).iterate("days");

while(iter.hasNext()){

    var momentObj = iter.next();

    var assessment = _.find(chartData.tabular, {'date': momentObj.format('DD/MM/YYYY')});

    tickValues.push(momentObj.valueOf());

    if(assessment != null){

        if(assessment.type == 'calculated'){
            data.push({date: momentObj.valueOf(), calculated: assessment.score, manual: null});
        }

        if(assessment.type == 'manual'){
            data.push({date: momentObj.valueOf(), calculated: null, manual: assessment.score});
        }
    }
}

log(data);

var margin = {top: 20, right: 55, bottom: 30, left: 40},
    width  = $('#cahai-chart').width() - margin.left - margin.right,
    height = 500  - margin.top  - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .rangeRound([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues(tickValues)
    .tickFormat(function(d){return d3.time.format('%d/%m/%y')(new Date(d))});

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var color = d3.scale.ordinal()
    .range(["#001c9c","#101b4d","#475003","#9c8305","#d3c47c"]);

var svg = d3.select("#cahai-chart svg")
    .attr("width",  width  + margin.left + margin.right)
    .attr("height", height + margin.top  + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var labelVar = 'date';
var varNames = d3.keys(data[0]).filter(function (key) { return key !== labelVar;});
color.domain(varNames);

data.forEach(function (d) {
    var y0 = 0;
    d.mapping = varNames.map(function (name) {
        return {
            name: name,
            label: d[labelVar],
            y0: y0,
            y1: y0 += +d[name]
        };
    });
    d.total = d.mapping[d.mapping.length - 1].y1;
});

x.domain(data.map(function (d) { return d.date; }));
y.domain([0, d3.max(data, function (d) { return d.total; })]);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Score");

var selection = svg.selectAll(".series")
    .data(data)
    .enter().append("g")
    .attr("class", "series")
    .attr("transform", function (d) { return "translate(" + x(d.date) + ",0)"; });

selection.selectAll("rect")
    .data(function (d) { return d.mapping; })
    .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function (d) { return y(d.y1); })
    .attr("height", function (d) { return y(d.y0) - y(d.y1); })
    .style("fill", function (d) { return color(d.name); })
    .style("stroke", "grey")
    .on("mouseover", function (d) { showPopover.call(this, d); })
    .on("mouseout",  function (d) { removePopovers(); })

var legend = svg.selectAll(".legend")
    .data(varNames.slice().reverse())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function (d, i) { return "translate(55," + i * 20 + ")"; });

legend.append("rect")
    .attr("x", width - 10)
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", color)
    .style("stroke", "grey");

legend.append("text")
    .attr("x", width - 12)
    .attr("y", 6)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function (d) { return d; });

function removePopovers () {
    $('.popover').each(function() {
        $(this).remove();
    });
}

function showPopover (d) {
    $(this).popover({
        title: d.name,
        placement: 'auto top',
        container: 'body',
        trigger: 'manual',
        html : true,
        content: function() {
            return "Date: " + d3.time.format('%d/%m/%y')(new Date(d.label)) +
                "<br/>Score: " + d3.format(",")(d.value ? d.value: d.y1 - d.y0); }
    });
    $(this).popover('show')
}