Question

现在我正在使用D3 v4尝试创建一个包含x轴标签的简单折线图。我不确定如何正确生成标签。

以下是我的要点：https://gist.github.com/pebblexe/0fa48e4b10426ccf3d339b9e9060e727

另外，如何制作适用于https://bl.ocks.org的要点？

感谢您抽出时间和耐心回答这个问题。

Answer 1

我对你想要在那个x轴上的尺度感到困惑。现在你正在使用scaleTime，这是没有意义的，因为你的x值是不日期或时间。您的选择是scaleLinear（如果您的所有值都是numeric and continuous - 这似乎是您在解析函数中尝试做的事情）。但是我认为scaleOrdinal更适合您的数据（特别是scalePoint）。

完整运行代码：

<!DOCTYPE html>

<script src="https://d3js.org/d3.v4.min.js"></script>

<div id="chart0"></div>
<script>
  var data = {
    "studyGuide": {
      "count": 20,
      "avgTime": "4 minutes and 32 seconds",
      "unitCount": [{
        "name": "welcome",
        "count": 3
      }, {
        "name": "1",
        "count": 10
      }, {
        "name": "2",
        "count": 5
      }, {
        "name": "3",
        "count": 12
      }, {
        "name": "4",
        "count": 15
      }, {
        "name": "5",
        "count": 2
      }, {
        "name": "6",
        "count": 7
      }]
    }
  };

  var dataParsed = data['studyGuide']['unitCount'];

  // set the dimensions and margins of the graph
  var margin = {
      top: 20,
      right: 20,
      bottom: 30,
      left: 50
    },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  // set the ranges
  var x = d3.scalePoint().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);

  // define the line
  var valueline = d3.line()
    .x(function(d) {
      return x(d.name);
    })
    .y(function(d) {
      return y(d.count);
    });

  // append the svg obgect to the body of the page
  // appends a 'group' element to 'svg'
  // moves the 'group' element to the top left margin
  var svg = d3.select("#chart0").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 + ")");


  // format the data
  dataParsed.forEach(function(d) {
    d.count = +d.count;
  });

  console.log("dataParsed", dataParsed);

  // Scale the range of the data
  x.domain(dataParsed.map(d => d.name));
  y.domain([0, d3.max(dataParsed, function(d) {
    return d.count;
  })]);

  // Add the valueline path.
  svg.append("path")
    .data([dataParsed])
    .attr("class", "line")
    .attr("d", valueline)
    .style("fill", "none")
    .style("stroke", "steelblue")
    .style("stroke-width", "2px");

  // Add the X Axis
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add the Y Axis
  svg.append("g")
    .call(d3.axisLeft(y));
</script>

要解决您的阻止问题，您需要将基本html文件命名为 index.html ，这里是您的代码作为块要点：https://bl.ocks.org/larsenmtl/93cb0b5a5201d63e679826877406b606

d3 - 无法为x轴创建标签

1 个答案: