将线图转换为“平方”图表不是条形图

Question

我刚刚创建了一个线图，但我真正想要的是这条线不是从点到点，而是线更平方。 我不知道这是否有特定的名称，但这些图片应该更加清晰：

这就是我所拥有的：

这就是我想要的：

有没有办法在d3中执行此操作而无需创建添加“额外”点的脚本？

这是我用于折线图的代码：

    var maxDepth = graphObj[graphObj.length-1].maxDepth ;

    $('#floodRiskChart').html('');

    var margin = {top: 5, right: 5, bottom: 50, left: 65},
        width = 410 - margin.left - margin.right,
        height = 210 - margin.top - margin.bottom;

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

    var y = d3.scale.linear()
        .domain([0, maxDepth ])
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

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

    var line = d3.svg.line()
        .x(function(d) { return x(d.exceedance); })
        .y(function(d) { return y(d.depth); });

    var svg = d3.select("#chart").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 + ")");

    graphObj.forEach(function(d) {
        //d.date = parseDate(d.date);
        d.exceedance = parseFloat(+d.exceedance);
        d.depth= parseFloat(+d.depth);
    });

    x.domain(d3.extent(graphObj, function(d) { return parseFloat(d.exceedance); }));

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .append("text")
        .attr("x", "25%")
        .attr("dy", "3em")
        .html("chance");

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", -50)
        .attr("dx", 0)
        .style("text-anchor", "end")
        .html("depth");

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

Answer 1

你需要在行生成器上添加.interpolate('step-after')，如下所示：

var line = d3.svg.line()
             .interpolate('step-after')
             .x(function(d) { return x(d.exceedance); })
             .y(function(d) { return y(d.depth); });

这将为您提供结果，可以在此处找到更多信息：enter link description here在页面末尾