Question

我正在跟随迈克本人this example。示例中的timeFormat是（“％d-％b-％y”），但使用我自己的数据仅使用年份。我做了所有必要的改变（我想）。 y轴显示，但x轴不显示。也没有错误显示，所以我不知道该去哪里。以下是我的代码。谢谢！

<!DOCTYPE html>
<meta charset="utf-8">
<p></p>

<style>

.axis--x path {
    display: none;
}

.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}

</style>

<!--We immediately define the variables of our svg/chart-->
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>

<script>

// Now we give our svg some attributes. We use conventional margins as set out by Mike Bostock himself. 
// Sets width and height minus the margins.
var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Here we set out the time format: date-month-year.
//var parseTime = d3.timeParse("%d-%b-%y");

var formatTime = d3.timeFormat("%Y");
formatTime(new Date); // "2015"

// Now we set our axis. X is according to the time, and y is linear.
// We use rangeRound to round all the values to the nearest whole number.
// We don't use rangeBands or rangePoints as we're not creating a bar chart or scatter plot. 
var x = d3.scaleTime()
    .rangeRound([0, width]);

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

// Now we tell what we want our line to do/represent. 
// x is the date, and y is the close price.
var line = d3.line()
    .x(function(d) {
        return x(d.date);
    })
    .y(function(d) {
        return y(d.close);
    });

// This is where we load our tsv file.
d3.tsv("/LineCharts/Line Chart 2 - MO Capital Punishment/data/data.tsv", function(d) {
    d.date = formatTime(d.date);
    d.close = +d.close;
    return d;
}, function(error, data) {
    if (error) throw error;

    // The .extent function returns the minimum and maximum value in the given array. 
    // Then, function(d) { return d.date; } returns all the 'date' values in 'data'. 
    // The .domain function which returns those maximum and minimum values to D3 as the range for the x axis.
    x.domain(d3.extent(data, function(d) {
        return d.date;
    }));

    //Same as above for the x domain.
    y.domain(d3.extent(data, function(d) {
        return d.close;
    }));

    // Note that we use attr() to apply transform as an attribute of g.
    // SVG transforms are quite powerful, and can accept several different kinds of transform definitions, including scales and rotations. 
    // But we are keeping it simple here with only a translation transform, which simply pushes the whole g group over and down by some amount, each time a new value is loaded onto the page.
    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    // Doing the same as above but for the y axis. 
    g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y))
        //This is where we append(add) text labels to our y axis.       
        .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .style("text-anchor", "end")
        .text("Total");

    g.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);

});

</script>

D3.js折线图 - 无法显示x轴

0 个答案: