javascript - D3 图表 : Adding a line to a date chart, 没有日期值

Question

我想在图表中添加一条目标线，该目标没有日期值，因此它的范围应从第一个日期到最后一个日期。

http://jsfiddle.net/90fu4dsj/ - 取消注释目标函数。

    var data = [
        {date: "2-May-15", close: 50},
        {date: "1-May-15", close: 50},
        {date: "30-Apr-15", close: 50},
        {date: "27-Apr-15", close: 60},
        {date: "26-Apr-15", close: 40},
        {date: "25-Apr-15", close: 35},
        {date: "24-Apr-15", close: 40},
        {date: "23-Apr-15", close: 30},
        {date: "20-Apr-15", close: 20},
        {date: "19-Apr-15", close: 15},
        {date: "15-Apr-15", close: 10}
    ],

    // add this as a line across the chart
    goal = [
        {close: 53},
    ],

    margin = {top: 20, right: 50, bottom: 30, left: 50},
    width = 500 - margin.left - margin.right,
    height = 350 - margin.top - margin.bottom,

    parseDate = d3.time.format("%d-%b-%y").parse,
    bisectDate = d3.bisector(function(d) { return d.date; }).left,
    formatValue = d3.format(",.2f"),

    x = d3.scale.linear()
        .range([0, width]),

    y = d3.time.scale()
        .range([height, 0]),

    xAxis = d3.svg.axis()
        .scale(x)
        .orient("top"),

    yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickFormat(d3.time.format("%e %b")),

    line = d3.svg.line()
        .y(function(d) { return y(d.date); })
        .x(function(d) { return x(d.close); })
        .interpolate('cardinal'),

    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 + ")");


enter(data);
function enter(data) {

    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });

    data.sort(function(a, b) {
        return a.date - b.date;
    });

    y.domain([data[0].date, data[data.length - 1].date]);
    x.domain(d3.extent(data, function(d) { return d.close; }));

    svg.append("g")
        .attr("class", "x axis")
        .call(xAxis);

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

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


}













goalLine(goal);
function goalLine(data){
    data.forEach(function(d) {
        d.close = +d.close;
    });

    var oldData = d3.select('.line').datum();
    data = oldData.concat(data);

    data.sort(function(a, b) {
        return a.date - b.date;
    });

    y.domain([data[0].date, data[data.length - 1].date]);
    x.domain(d3.extent(data, function(d) { return d.close; }));

    svg = d3.select("svg")
        .attr("height", height + margin.top + margin.bottom + 1000);

    svg.select(".x.axis") // change the x axis
        .call(xAxis);
    svg.select(".y.axis") // change the y axis
        .call(yAxis);

    svg.select('.line')
        .datum(data)
        .attr('d', line);
}

Answer 1

我只是使用你的比例添加一条 svg 线。至于 y 值，请使用 y 比例的边界情况，如下所示:

svg.append("line")
            .attr("x1",x(53))
            .attr("y1",y(data[0].date))
            .attr("x2",x(53))
            .attr("y2",y(data[data.length - 1].date))
            .attr("stroke","blue");

我已经在你的 fiddle 代码中尝试过了，我将此代码放在“svg.append(“path”)”代码之后。