如何创建具有垂直线和不同背景的折线图？

Question

我需要创建一条折线图，并用一条垂直线显示边框。左侧应分别涂成红色，右侧应涂成绿色：

我开始在库中查找示例，但是没有示例...我在D3上做了相似之处。但是我只能绘制图形和垂直线，而无法填充零件并显示图例。 请告诉我，如何创建这种时间表？ 是否有任何现有的实施解决方案？ 我的代码中未绘制区域且没有图例。

// https://plnkr.co/edit/9tnP6l15dqmCaOAK8Ojm?p=preview

function drawChart(data) {

var svgWidth = 600, 
    svgHeight = 400;

var margin = { top: 20, right: 20, bottom: 30, left: 50 };

var width = svgWidth - margin.left - margin.right;
var height = svgHeight - margin.top - margin.bottom;

var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);

// Grouping element with margins
var g = svg.append("g")
    .attr("transform", 
    "translate(" + margin.left + "," + margin.top + ")"
);

var x = d3.scaleLinear().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);

var line = d3.line()
    .x(function(d) { return x(d.date)})
    .y(function(d) { return y(d.value)})
    x.domain(d3.extent(data, function(d) { return d.date }));
    y.domain(d3.extent(data, function(d) { return d.value }));

g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(0)")
    .attr("y", 0)
    .attr("dx", "50em")
    .attr("dy", "-0.5em")
    .attr("text-anchor", "start")
    .text("Title ($)");

// Text for Y axes
g.append("g")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("text-anchor", "end")
    .text("Price ($)");

g.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 1)
    .attr("d", line);

g.append("line")
    .attr("x1", 300) 
    .attr("y1", 0)
    .attr("x2", 300)
    .attr("y2", 350)
    .style("stroke-width", 2)
    .style("stroke", "red")
    .style("fill", "black");
}

document.addEventListener("DOMContentLoaded", function(event) {
var parsedData = [{
    date: 0,
    value: 10
 }, {
    date: 0,
    value: 1000
 }, {
    date: 200,
    value: 2400
 }, {
    date: 300,
    value: 4600
 }, {
    date: 400,
    value: 5600
 }, {
    date: 500,
    value: 7777
 }];

drawChart(parsedData);
});

Answer 1

有多种创建方法，例如使用相同的数据绘制两条路径并使用<clipPath>。

但是我认为最简单的方法是为每个路径使用不同的数据。按照这种方法，我们只需要设置区域生成器...

var area = d3.area()
    .x(function(d) { return x(d.date)})
    .y1(function(d) { return y(d.value)})
    .y0(y(0));

...并添加路径，根据边界（此处称为border）过滤数据：

g.append("path")
    .datum(data.filter(function(d) {
        return d.date <= border;
    }))
    .attr("fill", "red")
    .attr("d", area);

g.append("path")
    .datum(data.filter(function(d) {
        return d.date >= border;
    }))
    .attr("fill", "green")
    .attr("d", area);

这是使用您的代码的演示：

var data = [{
  date: 0,
  value: 1000
}, {
  date: 200,
  value: 2400
}, {
  date: 300,
  value: 4600
}, {
  date: 400,
  value: 5600
}, {
  date: 500,
  value: 7777
}];

var svgWidth = 600,
  svgHeight = 400;

var margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 50
};

var width = svgWidth - margin.left - margin.right;
var height = svgHeight - margin.top - margin.bottom;

var svg = d3.select('svg')
  .attr("width", svgWidth)
  .attr("height", svgHeight);

// Grouping element with margins
var g = svg.append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")"
  );

var x = d3.scaleLinear().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);

var border = 300;

var line = d3.line()
  .x(function(d) {
    return x(d.date)
  })
  .y(function(d) {
    return y(d.value)
  });

var area = d3.area()
  .x(function(d) {
    return x(d.date)
  })
  .y1(function(d) {
    return y(d.value)
  })
  .y0(y(0));

x.domain(d3.extent(data, function(d) {
  return d.date
}));
y.domain([0, d3.max(data, function(d) {
  return d.value
})]);

g.append("path")
  .datum(data.filter(function(d) {
    return d.date <= border;
  }))
  .attr("fill", "red")
  .attr("d", area);

g.append("path")
  .datum(data.filter(function(d) {
    return d.date >= border;
  }))
  .attr("fill", "green")
  .attr("d", area);

g.append("path")
  .datum(data)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-linejoin", "round")
  .attr("stroke-linecap", "round")
  .attr("stroke-width", 2)
  .attr("d", line);

g.append("line")
  .attr("x1", x(border))
  .attr("y1", 0)
  .attr("x2", x(border))
  .attr("y2", 350)
  .style("stroke-width", 2)
  .style("stroke", "blue");

g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .append("text")
  .attr("fill", "#000")
  .attr("transform", "rotate(0)")
  .attr("y", 0)
  .attr("dx", "50em")
  .attr("dy", "-0.5em")
  .attr("text-anchor", "start")
  .text("Title ($)");

// Text for Y axes
g.append("g")
  .call(d3.axisLeft(y))
  .append("text")
  .attr("fill", "#000")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", "0.71em")
  .attr("text-anchor", "end")
  .text("Price ($)");

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

请记住，此简单代码有效，因为在您的示例中，限制（300）实际上是一个数据点。如果不是这种情况（例如，限制为280，但两个邻居数据点分别为250和300），则需要使用更复杂的算法来创建两个单独的数据设置。