D3 x轴日期标签显示为小数

要将D3 x轴的日期标签显示为小数，可以使用d3.timeFormat()函数来格式化日期，然后使用d3.axisBottom()函数来创建x轴，最后使用tickFormat()方法来设置标签的格式。

以下是一个示例代码，其中x轴显示的日期标签为小数：

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.timeParse("%Y-%m-%d");
var formatDecimal = d3.format(".1f");

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom(x).tickFormat(formatDecimal);

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

d3.csv("data.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.value = +d.value;
    });

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

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

    svg.append("g")
        .attr("class", "y axis")
        .call(d3.axisLeft(y));

    svg.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.date); })
        .attr("width", 4)
        .attr("y", function(d) { return y(d.value); })
        .attr("height", function(d) { return height - y(d.value); });
});

在上述代码中，首先定义了一个parseDate函数来解析日期字符串，然后使用d3.scaleTime()函数创建了一个时间比例尺x，使用d3.scaleLinear()函数创建了一个线性比例尺y。接着，使用d3.axisBottom()函数创建了x轴，并使用.tickFormat(formatDecimal)方法设置了标签的格式为小数。最后，使用d3.csv()函数加载数据，并在绘制柱状图时使用x和y比例尺来设置x和y坐标。

请注意，上述代码假设数据文件为CSV格式，其中包含两列：日期（date）和值（value）。您需要根据实际情况修改代码以适应您的数据格式和需求。