如何用垂直折線圖填充區域？

Question

我試圖用 D3.js 制作一個垂直圖表，並感覺線條和 y 軸之間有顏色的區域，但它根本沒有填充。 它只填充了一部分。

這是我試圖獲得的正確圖表的圖像：

這是我現在擁有的錯誤圖表的圖像：

填錯圖表

使用標准圖表填充區域很簡單。 可以使用 y0 參數並將其設置為零以填充 x 軸和 y 的頂部值之間的所有區域。

使用垂直圖表填充區域對我來說並不是那么簡單，因為我無法使用 y0 來解決問題。 我讓它工作的唯一方法是在輸入數組的末尾添加行值，另一個具有此值 (x,y)=>(0, min-depth) 的元素。 所以我總是至少有一個元素的 x 值為零。

 var allArray = [{ "parameter": 0.32, "depth": -0.02 }, { "parameter": 0.32, "depth": -0.04 }, { "parameter": 0.325, "depth": -0.06 }, { "parameter": 0.33, "depth": -0.08 }, { "parameter": 0.335, "depth": -0.1 }, { "parameter": 0.33, "depth": -0.12 }, { "parameter": 0.315, "depth": -0.14 }, { "parameter": 0.325, "depth": -0.16 }, { "parameter": 0.33, "depth": -0.18 }, { "parameter": 0.335, "depth": -0.2 }, { "parameter": 0.335, "depth": -0.22 }, { "parameter": 0.315, "depth": -0.24 }, { "parameter": 0.32, "depth": -0.26 }, { "parameter": 0.33, "depth": -0.28 }, { "parameter": 0.34, "depth": -0.3 }, { "parameter": 0.345, "depth": -0.32 }, { "parameter": 0.355, "depth": -0.34 }, { "parameter": 0.37, "depth": -0.36 }, { "parameter": 0.365, "depth": -0.38 }, { "parameter": 0.335, "depth": -0.4 }, { "parameter": 0.32, "depth": -0.42 }, { "parameter": 0.3, "depth": -0.44 }, { "parameter": 0.29, "depth": -0.46 }, { "parameter": 0.235, "depth": -0.48 }, { "parameter": 0.22, "depth": -0.5 } ]; draw2("#svg4a", allArray); function draw2(selector2, allArray) { var data = allArray; var startElement = { depth: 0, parameter: 0.3 }; data.unshift(startElement); var margin = { top: 20, right: 20, bottom: 0, left: 35 }; var width = 150 - margin.left, height = 580 - margin.top; var svg = d3.select(selector2) .append("svg") .attr("class", "SVGcontent") .attr("width", width + margin.left) .attr("height", height + margin.top); // Pattern definition const defs = svg.append('defs') .append('pattern') .attr('id', 'whitecarbon2') .attr('patternUnits', 'userSpaceOnUse') .attr('width', 4) .attr('height', 4) .append('path') .attr('stroke', '#010101') .attr('stroke-width', 1) .attr("opacity", 0.5) .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2'); data.forEach(function(d) { d.parameter = parseFloat(d.parameter); }); var xScale = d3.scaleLinear() .domain([ d3.max(data, function(d) { return d.parameter }) + 0.4, 0 ]) .range([0, width]); var yScale = d3.scaleLinear() .domain([ 0, d3.min(data, function(d) { return d.depth }) ]) .range([0, height - 20]); var line = d3.line() .x(function(d) { return xScale(d.parameter) }) .y(function(d) { return yScale(d.depth) }); var artboard = svg.append("g") .attr("transform", "translate(35," + margin.top + ")"); var area = d3.area() .x1(function(d) { return xScale(d.parameter) }) .x0(xScale(0)) .y(function(d) { return yScale(d.depth) }); // add the area artboard.append("path") .datum(data) .attr("class", "areaColore1") .attr("d", area) .attr("fill", "#fefefe"); // add the pattern artboard.append("path") .datum(data) .attr("class", "area") .attr("d", area) .style('stroke', '#777777') .attr("fill", "url(#whitecarbon2)"); artboard.append("path") .attr("d", line(data)) .attr("stroke-width", "2") .attr("fill", "none"); var xAxis = d3.axisTop(xScale); ticks = xScale.ticks(1); ticks.push(0); ticks.push(0.3); xAxis.tickValues(ticks); var yAxis = d3.axisLeft(yScale); artboard.append("g") .attr("class", "xAxis") .call(xAxis) .selectAll("text") .attr("y", -15) .attr("x", 0) .attr("dy", ".35em") .attr("transform", "rotate(none)") .style("text-anchor", "middle"); artboard.append("g") .attr("transform", "translate(0,0)") .attr("class", "yAxis") .call(yAxis); // Adding title label to axis Y artboard.append("text") .attr("transform", "rotate(90)") .attr("y", 30) .attr("x", 6) // .attr("dy", "1em") .style('fill', '#777777') .style("text-anchor", "start") .text("Depth [m]"); function make_x_gridlines() { return xAxis.ticks(1); } function make_y_gridlines() { return yAxis.ticks(11); } artboard.append("g") .attr("class", "grid gridX") .call(make_x_gridlines() .tickSize(-height + margin.top - 50) .tickFormat("") ) artboard.append("g") .attr("class", "grid gridY2") .attr("transform", "translate(0,0)") .call(make_y_gridlines() .tickSize(-200) .tickFormat("") ) }

 <script src="https://d3js.org/d3.v5.min.js"></script> <div id="svg4a"></div>

預期：用顏色填充從垂直值線到 y 軸的所有區域。

實際：填充區域僅用於線的第一個和最后一個點值之間的連接線。

這是一個實時示例：實時圖表

注意：我還嘗試添加此代碼以使參數字段中始終為 0，因此圖表已正確填充。

我添加的代碼是這樣的：

  var startElement = { depth: 0, parameter: 0.3 };

  data.unshift(startElement);

並且這個也可以在不設置 .x0 的情況下正常工作（即使設置它是正確的）。 但我的目標是找到一個配置，我不必在輸入數組值中插入假值。 我認為 insert .x0 應該足以使圖表填充整個圖表，就像 y0 如果圖表處於水平模式，則從零填充到參數值。 有沒有辦法在不插入假值的情況下做到這一點？

Answer 1

如果您想要垂直面積圖，則不應使用x 、 y0和y1 。 您應該改用y 、 x0和x1 ：

var area = d3.area()
    .x1(function(d) {
        return xScale(d.parameter)
    })
    .x0(xScale(0))
    .y(function(d) {
        return yScale(d.depth)
    });

這是帶有該更改的代碼：

 var allArray = [{ "parameter": 0.32, "depth": 0 }, { "parameter": 0.32, "depth": -0.02 }, { "parameter": 0.32, "depth": -0.04 }, { "parameter": 0.325, "depth": -0.06 }, { "parameter": 0.33, "depth": -0.08 }, { "parameter": 0.335, "depth": -0.1 }, { "parameter": 0.33, "depth": -0.12 }, { "parameter": 0.315, "depth": -0.14 }, { "parameter": 0.325, "depth": -0.16 }, { "parameter": 0.33, "depth": -0.18 }, { "parameter": 0.335, "depth": -0.2 }, { "parameter": 0.335, "depth": -0.22 }, { "parameter": 0.315, "depth": -0.24 }, { "parameter": 0.32, "depth": -0.26 }, { "parameter": 0.33, "depth": -0.28 }, { "parameter": 0.34, "depth": -0.3 }, { "parameter": 0.345, "depth": -0.32 }, { "parameter": 0.355, "depth": -0.34 }, { "parameter": 0.37, "depth": -0.36 }, { "parameter": 0.365, "depth": -0.38 }, { "parameter": 0.335, "depth": -0.4 }, { "parameter": 0.32, "depth": -0.42 }, { "parameter": 0.3, "depth": -0.44 }, { "parameter": 0.29, "depth": -0.46 }, { "parameter": 0.235, "depth": -0.48 }, { "parameter": 0.22, "depth": -0.5 } ]; draw2("#svg4a", allArray); function draw2(selector2, allArray) { var data = allArray; var margin = { top: 20, right: 20, bottom: 0, left: 35 }; var width = 150 - margin.left, height = 580 - margin.top; var svg = d3.select(selector2) .append("svg") .attr("class", "SVGcontent") .attr("width", width + margin.left) .attr("height", height + margin.top); // Pattern definition const defs = svg.append('defs') .append('pattern') .attr('id', 'whitecarbon2') .attr('patternUnits', 'userSpaceOnUse') .attr('width', 4) .attr('height', 4) .append('path') .attr('stroke', '#010101') .attr('stroke-width', 1) .attr("opacity", 0.5) .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2'); data.forEach(function(d) { d.parameter = parseFloat(d.parameter); }); var xScale = d3.scaleLinear() .domain([ d3.max(data, function(d) { return d.parameter }) + 0.4, 0 ]) .range([0, width]); var yScale = d3.scaleLinear() .domain([ 0, d3.min(data, function(d) { return d.depth }) ]) .range([0, height - 20]); var line = d3.line() .x(function(d) { return xScale(d.parameter) }) .y(function(d) { return yScale(d.depth) }); var artboard = svg.append("g") .attr("transform", "translate(35," + margin.top + ")"); var area = d3.area() .x1(function(d) { return xScale(d.parameter) }) .x0(xScale(0)) .y(function(d) { return yScale(d.depth) }); // add the area artboard.append("path") .datum(data) .attr("class", "areaColore1") .attr("d", area) .attr("fill", "#fefefe"); // add the pattern artboard.append("path") .datum(data) .attr("class", "area") .attr("d", area) .style('stroke', '#777777') .attr("fill", "url(#whitecarbon2)"); artboard.append("path") .attr("d", line(data)) .attr("stroke-width", "2") .attr("fill", "none"); var xAxis = d3.axisTop(xScale); ticks = xScale.ticks(1); ticks.push(0); ticks.push(0.3); xAxis.tickValues(ticks); var yAxis = d3.axisLeft(yScale); artboard.append("g") .attr("class", "xAxis") .call(xAxis) .selectAll("text") .attr("y", -15) .attr("x", 0) .attr("dy", ".35em") .attr("transform", "rotate(none)") .style("text-anchor", "middle"); artboard.append("g") .attr("transform", "translate(0,0)") .attr("class", "yAxis") .call(yAxis); // Adding title label to axis Y artboard.append("text") .attr("transform", "rotate(90)") .attr("y", 30) .attr("x", 6) // .attr("dy", "1em") .style('fill', '#777777') .style("text-anchor", "start") .text("Depth [m]"); function make_x_gridlines() { return xAxis.ticks(1); } function make_y_gridlines() { return yAxis.ticks(11); } artboard.append("g") .attr("class", "grid gridX") .call(make_x_gridlines() .tickSize(-height + margin.top - 50) .tickFormat("") ) artboard.append("g") .attr("class", "grid gridY2") .attr("transform", "translate(0,0)") .call(make_y_gridlines() .tickSize(-200) .tickFormat("") ) }

 <script src="https://d3js.org/d3.v5.min.js"></script> <div id="svg4a"></div>

---

PS：對於像圖像中那樣的面積圖，您需要第一個深度為 0 的數據點。