Question

我正在尝试使用d3.js制作简单的折线图，但由于我无法理解的原因，图形不占用整个水平空间。 SVG元素宽度继承自父<div>（200px），但d3.line()的路径仅占总空间的1/4。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <div style="width: 200px;">
      <svg id="chart"></svg>
    </div>

    <script>
      let svg = document.getElementById('chart');
      let width = svg.parentElement.offsetWidth;
      let height = svg.parentElement.offsetHeight;
      let data = [23, 23, 42, 23, 21, 34, 45, 21, 23];

      let x = d3.scaleLinear()
          .domain([0, d3.max(data)])
          .range([0, width]);

      let y = d3.scaleLinear()
          .domain([0, d3.max(data)])
          .range([0, height]);

      let line = d3.line()
          .x((d, i) => x(i))
          .y((d, i) => y(d));

      let chart = d3.select('#chart')
          .attr('width', width)
          .attr('height', height);

      let path = chart.append('path')
          .attr('d', line(data))
          .attr('stroke', 'steelblue')
          .attr('stroke-width', 2)
          .attr('fill', 'none');
    </script>
  </body>
</html>

我认为这个问题与x轴刻度函数密切相关：

let x = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([0, width]);

但经过多次尝试后我无法理解。

Answer 1

因为在行生成器中，您将每个数据点的索引传递给x scale ......

const isAuthenticated = yield call(getAuthenticationToken) // returns a promise which resolves when the user has successfully authenticated on the SSO page
yield put(actions.checkAuthSuccess(isAuthenticated))

...域中的最大值应为let line = d3.line() .x((d, i) => x(i)) //index here---^：

data.length - 1

以下是您更改的代码：

＆＃13;

let x = d3.scaleLinear()
    .domain([0, data.length - 1])

＆＃13;

svg {
  border: solid black 1px;
}

＆＃13;

PS：我在SVG中放了一个边框，只是为了让你看到现在这条线从一个边缘到另一个边缘。

图表不占用d3.js中的整个空间

1 个答案: