Question

我想让线图中的区域正确填充。（看图片看问题）

注意填充的区域和填充下的文字：

以下是代码：

＆＃13;

<!DOCTYPE html>
<style type="text/css">

.area {
    fill: lightsteelblue;
    stroke-width: 0;
}

</style>
<svg width="860" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%d-%b-%y");

var x = d3.scaleTime()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

d3.tsv("data.tsv", function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.close; })]);

var xAxis = d3.axisBottom(x)
    .ticks(d3.timeYear);

var yAxis = d3.axisRight(y)
    .tickSize(width);

var area = d3.area()
    .x0(function () {
    return 0,width;
})
    .x1(function (d) {
    return x(d.date);
}).y0(function () {
    return height,height;
})
    .y1(function (d) {
    return y(d.close);
});

var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(customXAxis);

g.append("g")
    .call(customYAxis);

function customXAxis(g) {
  g.call(xAxis);
  g.select(".domain").remove();
  g.selectAll(".tick line")
  .attr("stroke", "#e9e9e9")
  .attr("height","510px")
  .attr("transform", "translate(0," + -height + ")");
}

function customYAxis(g) {
  g.call(yAxis);
  g.select(".domain").remove();
  g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#e9e9e9");
  g.selectAll(".tick text").attr("x", width - 18).attr("dy", -4);
}

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);

g.append("path")
    .datum(data)
    .attr("class", "area")
    .attr("d", area);

});

</script>

＆＃13;

如果可能，如果有人知道，如何让区域填充不与y轴文本和所有轴线重叠，因此文本和轴线位于区域填充的顶部。 / p>

还有一件事，我已经尝试了几个小时。如何让x轴线与灰色y轴线一起创建网格？

如果有任何帮助，我将不胜感激。感谢。

Answer 1

对于您的主要问题：

您正在使用线生成器创建区域图 - 在填充生成的路径时，您只需连接第一个和最后一个点，从而连接您的图像。发电机如何“知道”填充区域的底部应该在哪里？ y轴值为零可能对于基础是常见的，但它肯定不是通用的。无论如何，线生成器需要包含缩放y值为0的点来创建正确的填充 - 这不是表示数据的准确线，除非起点和终点的y值为0，这就是除了线路生成器之外d3还提供区域生成器的原因。

使用d3.area（also, here's a canonical example likely using your data）代替d3.line：

var area = d3.area()
    .x(function(d) { return x(d.date); })
    .y1(function(d) { return y(d.close); })   // top of area
    .y0(yScale(0));                           // bottom of area

.y0方法是可选的，如果未指定，则默认为零，但这里是文档：

如果指定了y，则将y0访问器设置为指定的函数或   编号并返回此区域生成器。如果未指定y，则返回   当前的y0访问器，默认为：

function y() { return 0; }

生成区域时，将为每个区域调用y0访问器   输入数据数组中定义的元素，传递给元素d，   索引i和数组数据作为三个参数。请参阅area.x0   更多信息。（source）。

y1方法代表图形的顶部（与折线图中的y访问器相同），y0方法代表底部，在您的情况下是常量。

区域填充不起作用的D3图形

1 个答案: