javascript - D3 面积图未端到端渲染

Question

my area chart image我使用了面积图的示例:https://bl.ocks.org/mbostock/3883195并更改了数据。我没有在 x 轴上使用时间值，而是将值更改为字符串并使用域函数 x.domain( data.map( function(d) { return d.xvalue; } ) ); 使用缩放函数 var x = d3.scaleBand().rangeRound([0, width])。这样做有两个问题: 1. x 轴上的值与面积值(高点和低点)不同步。 2. 该区域没有覆盖 svg 的整个宽度。我对scaleBand的理解是它接受字符串值并将它们以相等的距离放置在x轴上。请让我知道我做错了什么。提前致谢..

var margin = {
  top: 40,
  right: 5,
  bottom: 25,
  left: 35
};
var width = 980 - margin.left - margin.right;
var height = 450 - margin.top - margin.bottom;



var svg = d3.select("body").append("svg").attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom),
  g = svg.append("g").attr("class", "chartBoxg").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// gridlines in x axis function
function make_x_gridlines() {
  return d3.axisBottom(x)
    .ticks(0)
}

// gridlines in y axis function
function make_y_gridlines() {
  return d3.axisLeft(y)
    .ticks(5)
}
var portavgValue;
console.log(portavgValue);
var line = d3.line()
  .x(function(d) {
    return x(d.xvalue);
  })
  .y(function(d) {
    return y(d.portalAvg);
  });

var x = d3.scaleBand()
  .rangeRound([0, width]);

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

var failRateArea = d3.area()
  .x(function(d) {
    return x(d.xvalue);
  })
  .y1(function(d) {
    return y(d.failrate);
  })
  .curve(d3.curveCatmullRom);

var successrateArea = d3.area()
  .x(function(d) {
    return x(d.xvalue);
  })
  .y1(function(d) {
    return y(d.successRate);
  })
  .curve(d3.curveCatmullRom);
//defining tooltip
var div = d3.select("body").append("div")
  .attr("class", "acadMetrictooltip")
  .style("opacity", 0);

d3.csv("data.csv", function(d) {

  d.failrate = +d.failrate;
  return d;
}, function(error, data) {
  if (error) throw error;
  x.domain(data.map(function(d) {
    return d.xvalue;
  }));
  y.domain([0, 100]).nice();

  failRateArea.y0(y(0));
  successrateArea.y0(y(0));

  // add the Y gridlines
  g.append("g")
    .attr("class", "Ygrid")
    .attr("transform", "translate(0,0)")
    .call(make_y_gridlines()
      .tickSize(-width)
      .tickFormat("")
    )

  // add the X gridlines
  g.append("g")
    .attr("class", "Xgrid")
    .attr("transform", "translate(0," + height + ")")
    .call(make_x_gridlines()
      .tickSize(-height)
      .tickFormat("")
    )




  g.append("g").attr("class", "sucRateBox")
    .append("path")
    .datum(data)
    .attr("fill", "#bdf4e1")
    .style("opacity", "0.9")
    .attr("d", successrateArea);

  g.append("g").attr("class", "failRateBox")
    .append("path")
    .datum(data)
    .attr("fill", "#d0aa9d")
    .style("opacity", "0.9")
    .attr("d", failRateArea);



  g.append("g").attr("class", "axisX")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickSizeOuter(0))
    .selectAll("text")
    .style("fill", "#6d6d6d")
    .style("font-size", "11px")
    .attr("transform", "rotate(0)");

  g.append("g").attr("class", "axisY")
    .call(d3.axisLeft(y).tickSizeOuter(0).tickFormat(function(d) {
      return d + "%"
    }))





});

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

Answer 1

您不应在此处使用频带标度:频带标度具有关联的带宽。

在此基础上，使用点刻度:

var x = d3.scalePoint()
   .rangeRound([0, width]);