将折线图转换为 'squared' 图表而不是条形图

Question

我刚刚创建了一个折线图，但我真正想要的是这条线不是点对点的，而是更方的。我不知道这个有没有具体的名字，但是这些图片应该更清楚一点：

这是我拥有的：

这就是我想要的：

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

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

    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 页面末尾

将折线图转换为 'squared' 图表而不是条形图

transform linechart to 'squared' chart not being a barchart

linechart

d3.js