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

我在你的小提琴代码中尝试过，我把这段代码放在“svg.append（”path“）”代码之后。

D3图表：在日期图表中添加一行，没有日期值

1 个答案: